526互联

vue_vueRouter同组件跳转失败

发布时间 2023-09-19 22:09:54作者: Steperouge

目录

场景再现

  • 现有一个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()
  }
)