在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
    }
  },
}

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

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。