Question

我正在使用以下指向动态路线的链接

<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/网址上单击另一个具有不同参数的nuxt链接，则什么也不会发生。我想这是因为url并没有真正改变。

用新参数“重新加载” 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

Answer 1

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

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

Answer 2

应该使用手表。只需根据值更新要更改的变量，例如，如果要监视id变量，然后将其设置为要显示的组件变量。

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

Nuxt JS-在动态路由中传递对象参数

2 个答案: