关于vue.js: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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。