Vue 使用this.$router.push实现页面跳转
想实现点击提交按钮后,跳回列表页面,展示数据。一开始点击提交,数据提交成功,但不跳转,使用router.push报错了以下是解决办法,一定要加return!!所以vue中页面的跳转办法就是return this.$router.push({name: 'XXXX'})这里的name是router/index.js定义好的名称会根据配置好的路径跳转。{...
·
在需要跳转的地方使用 return this.$router.push()
(return 一定要写上,别漏了)
方法一(不带参数跳转,直接跳转到相应界面)
push({ })提供多个属性,使用name:‘XX’ 则XX对应router路由中定义的name
这里的name是router/index.js定义好的名称
直接复制代码块↓
return this.$router.push({name: 'XXXX'})
方法二(带参数名+参数值跳转)
拼接方式:projects/task-instance?pageSize=10&pageNo=1&searchVal=test_mysql-pgsql=
复制代码:
return this.$router.push({
name: 'task-instance',
query: {'pageSize': 10,
'pageNo':1,
'searchVal':item.collectConfName
}
})
效果:
方法三(带参数值跳转)
这种拼接url方式就是 CreateComponents/12345 (componentId是12345)
第一种写法(用组件名称)
this.$router.push({name: 'CreateComponents', params: {componentId}})
第二种写法(用组件路径)
this.$router.push(`/basic-comp-mgt/comps-detail/${componentId}`)
这三种都是一样的实现方法,只是根据需求使用不同的属性去跳转。
更多推荐
已为社区贡献6条内容
所有评论(0)