Nuxt js - 在动态路由中传递对象参数答案

【问题标题】：Nuxt js - passing object params in dynamic routeNuxt js - 在动态路由中传递对象参数
【发布时间】：2019-08-22 02:36:09
【问题描述】：

我正在使用以下链接到动态路线

<nuxt-link :key="$route.fullPath" :to="{ name: 'items-id', params: { parent: { id: item.parent.id, description: item.parent.description } }}">Click me</nuxt-link>

所以导航到/items/ 正确传递了指定的参数。但是，如果我在/items/ url 上单击另一个具有不同参数的 nuxt-link，则什么也不会发生。我想这是因为 url 并没有真正改变。

用新参数“重新加载”网址的最佳方法是什么？

我考虑过对每个 nuxt-link 使用不同的路径

<nuxt-link :key="$route.fullPath" :to="{ path: '/items/' + item, params: { parent: { id: item.parent.id, description: item.parent.description } }}">Click me</nuxt-link>

但这会使 URL 变得丑陋，因为它包含对象 ref

【问题讨论】：

标签： vue.js vue-router nuxt.js

【解决方案1】：

使用手表应该可以做到。只需根据值更新您想要更改的变量，例如，如果您想要查看 id 变量，然后将其设置为您想要显示的组件变量。

watch: { 
 id (value) {
  this.VARIABLE = value
 }
}

【讨论】：

我试过了，但没有运气。 url 中的参数并没有真正改变。基本上我正在寻找的是为每个 nuxt-link 使用一组不同的参数重新渲染页面
我认为您应该将代码粘贴到此处的监视功能上。问题似乎在于路线更改时重新加载数据。

【解决方案2】：

只需 watch() 参数（可能是 id）并在它们更改时重新加载数据：

watch: {
  id() {
     // reload your item here
  },
  ...
},

【讨论】：

我试过了，但没有运气。 url 中的参数并没有真正改变。基本上我正在寻找的是为每个 nuxt-link 使用一组不同的参数重新渲染页面
我们这里缺少信息：如果 id 是 url 的参数，并且 nuxt-link 包含 id，那么肯定 url 会发生变化，并且您每个人都有不同的id时间，例如 /item/1、/item/20 等……当您从项目 1 导航到项目 20 时，将调用组件的 watch() 方法