Vue动态路由:路由参数改变,视图不更新问题的解决

1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用路由传参,还会传参到同一个路由,但是会遇到修改了页面参数,但是视图依旧是之前的内容,没有进行刷新,下面我来分享一下解决方法。
4.废话不多说,直接上效果图:

原因分析:
当 使用路由参数时,例如从/EnterpriseRegisterManagement/Enterpriserealname?state=0到/EnterpriseRegisterManagement/Enterpriserealname?state=1,原来的组件实例会被复用.因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再次被调用。
复用组件时,相对路由参数的变化作出响应的话,你可以简单的watch(监听变化)$route 对象

5.方法一:watch(监听变化) $route 对象:

  watch: {
    // 监听路由的变化 参数变化时更新发布订阅数据
    $route(to, from) {
      // console.log(to);
      // console.log(to.query.state);
      // console.log(from);
      console.log(from.query.state);
      if (to.query.state) {
        this.$nextTick(() => {
          this.state = to.query.state;
          this.$forceUpdate();
        });
      }
    },
  },

6.方法二:使用路由导航守卫:

beforeRouteUpdate (to, from, next) {
  // 做一些想要做的处理...
  next() // 一定要有next
 },

7.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。