Vue动态路由参数复用的问题

发表于 更新于 分类于 本文字数： 409 阅读时长 ≈ 1 分钟

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

解决办法

1.监听$ route

1
2
3
4
5
6
7
8
const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

2. 使用 beforeRouteUpdate 导航守卫

1
2
3
4
5
6
7
8
const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // to 要去的路由
    // from 从哪里来
    // next 是否放行，是个方法。调用才能去目标路由
  }
}