vue 路由新增参数 刷新页面

Question

vue项目中默认一进来的路由是 localhost:3000/#/work/workflow
该页面是一个父组件 组件下有3个子组件，页面有一个tab切换，分别展示对应的组件。

我现在想实现的是当我点击第三个tab的时候 我想给当前路由添加一个参数，也就是想改变当前的路由为localhost:3000/#/work/workflow?tab=2。我用的是下面的方法：

 this.$router.push(
        {
          path: '/work/workflow',
          query: {
           tab: '2'
          }
        }
      )

但是当我切换过来时 页面成了一片空白，需要手动刷新你下才能出现tab为2对应的组件。

各位大神帮忙分析下原因吧，怎样动态给路由添加参数，并且跳转到对应的tab对应的组件

Answer 1

在页面加载的时候，比如mounted时，去拿query的tab参数，手动去显示对应的tab（就是初始化一遍当前显示哪一个）。因为你这是tab方式，不是子路由方式，所以这个操做是必需的。如果用的地方很多，就封装一下，也不麻烦。

当然，我的项目时使用tab + 子路由方式，只需处理刷新时高亮问题就行，大致就这么个结构

<template>
  <div>
    <my-tab/>
    <router-view/>
  </div>
</template>

Answer 2

你可能是在created钩子去加载数据了。在/work/workflow页面里面去push当前的路由，是不会再触发created和mounted这些生命周期的了，所以页面数据没有再次加载。
此时，这个需求可以通过watch:$route来捕捉路由的变化，在$route变化时触发数据加载。

methods:{
  getList(){ // 加载数据的方法 }
},
created(){
  // 这个解决首次进入页面时加载数据的问题
  this.getList()
},
watch:{
  // 这个解决当前路由变化时加载数据的问题
  $route (val) {
    // 拿到路由参数，再加载数据
    this.getList()
  }
}