vue_vueRouter同组件跳转失败

• 场景再现
• 资料查询
• 解决

场景再现

• 现有一个Article页面, 通过/article/:id来匹配不同的文章页面, 当我需要实现跳转到上一篇或下一篇时, 即从/article/:id跳转另一个/article/:id时, 发现浏览器中只有地址变化了, 但是页面的很多组件, 包括文章内容都没有刷新,

资料查询

• 这个问题在vue-router的官方文档的动态路由匹配_响应路由参数的变化里有过说明:

  • 使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

    要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：

    • const User = {
        template: '...',
        created() {
          this.$watch(
            () => this.$route.params,
            (toParams, previousParams) => {
              // 对路由变化做出响应...
            }
          )
        },
      }
      

  • 或者，使用 beforeRouteUpdate 导航守卫，它也可以取消导航：

    • const User = {
        template: '...',
        async beforeRouteUpdate(to, from) {
          // 对路由变化做出响应...
          this.userData = await fetchUser(to.params.id)
        },
      }
      

解决

• 通过watch监听$route.params的变化, 如果发生变化那么就重新执行数据初始化

  • watch(
      () => $route.params,
      () => {
         // 数据初始化
         init()
      }
    )