How to make router param changes as reactive?

在Vue中，如果我们想要让路由参数变为响应式，即当路由参数改变时我们希望组件能够相应地更新或执行某些操作，我们可以使用Vue Router的一些特性来实现这一点。

Vue Router提供了几种方法来观察和响应路由参数的变化：

1. 监听 $route 对象

在Vue组件中，我们可以使用watch属性来监视$route对象。这样，每当路由发生变化时（包括路径、查询参数或哈希改变），watch里定义的函数就会被调用。

javascript
export default {
  watch: {
    '$route'(to, from) {
      // 当路由变化时执行的操作
      console.log('路由变化了', to);
      // 可以根据路由变化，做一些数据请求或其他逻辑处理
    }
  }
}

2. 使用 beforeRouteUpdate 导航守卫

对于路由参数的变化，特别是在同一路由的不同参数之间导航时（例如，从 /users/1 到 /users/2），我们可以使用组件内的 beforeRouteUpdate 导航守卫。这是一个在路由参数变化时且组件被复用时调用的钩子。

javascript
export default {
  beforeRouteUpdate(to, from, next) {
    console.log('路由参数变化了', to.params);
    // 这里可以根据新的路由参数来更新组件数据
    next(); // 确保调用 next() 来解决这个钩子
  }
}

3. 计算属性与 $route 结合

另外，我们还可以使用计算属性来根据 $route 的变化动态返回数据。每当关联的路由参数发生变化时，计算属性会重新计算。

javascript
export default {
  computed: {
    userId() {
      // 返回当前路由的用户ID参数
      return this.$route.params.userId;
    }
  }
}

这种方法使得我们可以在模板或其他地方直接绑定 userId，并且当URL中的用户ID更改时，userId 也会相应地更新。

总的来说，通过以上方法，我们可以在Vue中有效地使路由参数响应式，从而根据这些参数变化更新组件或执行相应的逻辑。