vue-router beforeRouteUpdate 切换时使用旧参数

Posted 2023-02-23

【中文标题】vue-router beforeRouteUpdate 切换时使用旧参数

【英文标题】：vue-router beforeRouteUpdate uses old parameter when switching

【发布时间】：2020-05-10 01:21:30

【问题描述】：

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

我的路线是来自 vue-router 文档的样板：

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

我正在链接以下代码：

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

方法：

  selectUser(user) 
    this.$router.push( name: 'user', params:  user_id: user.id  )
  ,

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

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

还有我的 fetch 方法：

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

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

【问题讨论】：

this.user_id 的声明在哪里？

您需要使用to.params.user_id获取更改后的用户，然后分配给this.user_id才能访问。

【参考方案1】：

您需要使用to.params 来访问路由参数。您需要在组件上分配值。它们不会自动分配。

在您的情况下，您需要在beforeRouteUpdate 中调用this.fetch() 之前将to.params.user_id 分配给this.user_id。

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

请参阅docs 了解组件内导航防护。

【讨论】：

我将此标记为答案，它似乎有效，但我收到错误：[Vue warn]: Avoid mutating a prop directly because the value will be overwritten when the parent component re-renders .相反，使用基于道具值的数据或计算属性。正在变异的道具：“user_id”

user_id 是否需要在您的组件上添加一个道具，它不能是data 上的一个项目吗？

是的，否则我无法直接链接 /task/5 例如 - 我必须从选定的任务列表中遍历，对吗？

根据文档 - 我需要使用复制道具的局部变量。然后我的 beforeRouteUpdate 更新该值而不是尝试操纵道具。 vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

【参考方案2】：

另一种方法是在prop user_id上使用watch，当它改变时你可以执行方法fetch()

在你的情况下：

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

希望对你有用！