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