Vue 使用this.$router.push实现页面跳转_this.$router.push直接跳转

在需要跳转的地方使用 return this.$router.push()

（return 一定要写上，别漏了）

方法一（不带参数跳转，直接跳转到相应界面）

push（{ }）提供多个属性，使用name:‘XX’ 则XX对应router路由中定义的name

这里的name是router/index.js定义好的名称

直接复制代码块↓

 return this.$router.push({name: 'XXXX'})

1
2

方法二（带参数名+参数值跳转）

拼接方式：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
                    }
                })
1
2
3
4
5
6
7

效果：

方法三（带参数值跳转）

这种拼接url方式就是 CreateComponents/12345 （componentId是12345）

第一种写法（用组件名称）
 this.$router.push({name: 'CreateComponents', params: {componentId}})


第二种写法（用组件路径）
 this.$router.push(`/basic-comp-mgt/comps-detail/${componentId}`)
1
2
3
4
5
6

---

这三种都是一样的实现方法，只是根据需求使用不同的属性去跳转。