Vue动态路由的坑点

对于动态路由/user/:name，组件为 User

操作 1：从其他页面跳转到/user/duke
操作 2：从/user/duke跳转到/user/lemon
操作 3：从user/lemon跳转到/user/duke

操作 2 和 3 时组件User会被复用，组件的生命周期函数都不会被触发，这就意味着我们无法修改组件的状态及页面视图，Vue 官方提供了两种方法去监听route的变化

方法 1：使用watch监听

watch: {
    $route(to, from) {
      console.log("to =>", to);
      console.log("from =>", from);
      this.user = to.params.name;
      // 对路由变化作出响应...
    }
  },

方法 2：使用路由守卫

beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }

这两种方法效果其实是一样的，只会在操作 2 和 3 中触发，在操作 1 中无法触发。

方法 3：使用生命周期补全方法 1 | 2
操作 1 会触发挂载钩子函数，所以我们可以mounted+方法 1 | 2 覆盖操作 1、2、3 的场景