Nuxt js - передача параметров объекта в динамическом маршруте

#vue.js #vue-router #nuxt.js

#vue.js #vue-маршрутизатор #nuxt.js

Вопрос:

Я использую следующую ссылку на динамические маршруты

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

Таким образом, переход к /items/ правильно передает указанные параметры. Но если я нажму на другую nuxt-ссылку с другими параметрами, находясь по /items/ URL, то ничего не произойдет. Я полагаю, это потому, что URL на самом деле не меняется.

Каков наилучший способ «перезагрузить» URL с новыми параметрами?

Я рассматривал возможность использования пути, который был бы разным для каждой nuxt-ссылки

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

Но это делает URL-адрес уродливым, поскольку он включает ссылку на объект

Ответ №1:

Просто watch() укажите параметры (возможно, идентификатор) и перезагрузите данные при их изменении:

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

1. Я пробовал это, но безуспешно. Параметры в URL на самом деле не меняются. По сути, то, что я ищу, — это повторно отобразить страницу с другим набором параметров для каждой nuxt-ссылки

2. здесь нам не хватает информации: если идентификатор является параметром URL-адреса, и nuxt-link включает идентификатор, тогда наверняка URL-адрес меняется, и у вас каждый раз будет другой id , что-то вроде /item /1 , /item / 20 и т.д. … И watch() метод компонента будет вызываться при переходе от элемента 1 к элементу 20

Ответ №2:

Использование watch должно это сделать. Просто обновите переменную, которую вы хотите изменить, в соответствии со значением, например, если вы хотите отслеживать переменную id, затем установите для нее переменную компонента, которую вы хотите отобразить.

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

1. Я пробовал это, но безуспешно. Параметры в URL на самом деле не меняются. По сути, то, что я ищу, — это повторно отобразить страницу с другим набором параметров для каждой nuxt-ссылки

2. Я думаю, вам следует вставить свой код в функцию watch здесь. Проблема, похоже, заключается в перезагрузке ваших данных при изменении маршрута.