vue动态路由后，路由正常刷新，页面获取不到动态参数？

在vue设置动态路由之后，地址栏路由正常跳转刷新，唯独页面的参数一直没有改变，难受的一比！

//router.js动态路由设置
routes: [
  {
      path: '/class/:cid',
      name: 'index',
      component: Main,
      meta: { title: '分类' }, 
    },
]

//菜单页面跳转事件
toggleNav(cid){
      this.$router.push({ name: 'index', params: {cid:cid}})
 }

//子页面获取路由
mounted () {
this.id =  this.$route.params.cid;
}

上面是vue设置动态路由和获取动态参数的方法，之前项目都是这样搞的，结果这次测试的时候，发现开始描述的bug，子页面获取不到动态参数！！！

怎么办？啥原因？
原因分析：由于跳转页面一致，只是参数发生了变化，难道vue这么懒的嘛？不应该，F5刷新发现，mounted里面的方法执行了一次，那应该就是push的方法不能触发mounted的事件的原因了！

找到了问题，就好办了，在子页面监听一下路由变化，在路由里面赋值改变参数就行了！

//路由监听方法：
watch:{
    $route:{
      handler(val,oldval){
        console.log(val);//新路由信息
        console.log(oldval);//老路由信息
      },
      // 深度观察监听
      deep: true
}

修改一下：

watch:{
    $route:{ //监听路由变化，改变页面id
      handler(val){
        this.id = val.params.cid
      },
      // 深度观察监听
      deep: true
    }
  },
}

页面终于能获取到动态参数了，遇到一个坑就能学一个新知识！