Vue.js vue路由器beforeRouteUpdate在切换时使用旧参数

我正在使用vue路由器，并尝试从一个用户记录链接到另一个，非常简单

我的路线是vue路由器文档中的样板文件：

  { path: '/user/:user_id', name: 'user', component: User, props: true },

我正在链接以下代码：

<a @click="selectUser(user.parent)">{{user.parent.email}}</a>

我正在尝试使用beforeRouteUpdate加载已更改的用户：

beforeRouteUpdate (to, from, next) {
  alert(this.user_id)
  this.fetch()
  next()
},

以及我的获取方法：

  fetch() {
    this.$store.dispatch('users/fetchUser', this.user_id)
  },

---

我也在使用vuex。beforeRouteUpdate中this.user_id（prop）的警报以原始id响应，而不是更改的id。它不应该是新更改/传递的ID吗？url将更改为新id，但它只是使用旧的/原始id而不是新传递的id加载数据。

您需要使用

to.params

访问路由参数。您需要在组件上指定值。它们不会自动分配

在您的情况下，在调用

this.fetch（）

之前，需要将

分配给.params.user\id

给

this.user\id

beforeRouteUpdate (to, from, next) {
  this.user_id = to.params.user_id
  alert(this.user_id)
  this.fetch()
  next()
}

---

请参阅关于组件内导航卫士。

另一种方法是在道具

用户id

上使用手表，当它更改时，您可以执行方法

fetch（）

就你而言：

watch: {
    user_id: function(newVal, oldVal) {
        this.fetch();
    }
},

---

我希望这可以是一个有用的

此.user_id的声明在哪里？您需要使用

to.params.user_id

获取已更改的用户，然后在访问之前将其分配给

this.user_id

。我将此标记为答案，它似乎可以工作，但我收到了错误：[Vue warn]：避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具正在变异：“user_id”是否需要组件上的道具，它是否可以是

数据

上的项目？是的，否则我无法直接链接/task/5，例如-我必须从选定的任务列表中遍历，对吗？根据文档-我需要使用一个局部变量来复制道具。然后，我的beforeRouteUpdate更新该值，而不是试图操纵道具。

watch: {
    user_id: function(newVal, oldVal) {
        this.fetch();
    }
},