Блог

Главная - Вопросы по программированию - VueJS, отправляющий маршрут с параметрами, показывает старые параметры в браузере

VueJS, отправляющий маршрут с параметрами, показывает старые параметры в браузере

#javascript #vue.js #vuejs2 #vue-router #browser-history

#javascript #vue.js #vuejs2 #vue-маршрутизатор #браузер-история

Вопрос:

Сценарий

У меня есть приложение, в котором я использую vue.js 2.6 и vue-router 3.0

там у меня есть ссылки на подробные страницы, подобные этой

 <div v-for="item in items">
    <router-link  :to="{name: 'details', params: {key: item.shortKey}}">
</div>

что работает

Теперь в целевом представлении параметр всегда имеет правильное значение, и когда я впервые нажимаю на ссылку, я вижу правильный короткий ключ в браузере.

Не работает

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

Как инструменты просмотра браузера, так и сам код имеют правильное значение. Чего мне не хватает?

Также использование router.push дает тот же результат. Переход из history в hash режим также не меняет поведение

Сокращенная конфигурация маршрутизатора

 const routes = new Router({
  mode: 'history',
  routes: [{
    component: layout,
    path: '/',
    children: [
      {
        path: '/',
        name: 'home',
        component: Home,
        meta:{display:"home"}
      },
      {
        path:'list',
        name:'list',
        component: listItemsComponent,
      },

      {
        path: 'details/:key',
        name: 'details',
        component: detailComponent
      },
    ]
  }]
});

Комментарии:

1. что вы имеете в виду ? Я вижу, что URL-адрес в href в dom содержит все тот же URL-адрес, указывающий на первый элемент. Но щелчок по нему показывает правильный элемент. Ручной ввод URL-адреса в браузере всегда работает

2. Можете ли вы воспроизвести это на скрипке?

3. @BoasEnkler Скорее всего, вам нужно принудительно заменить, используя key атрибут в router-view component. ie. <router-view :key="$route.fullPath" />

Ответ №1:

Попробуйте добавить уникальный ключ к каждому элементу в v-как показано ниже —

 <div v-for="item in items" :key="item.id">
    <router-link  :to="{name: 'details', params: {key: item.shortKey}}">
</div>

Согласно документам vue js,

Чтобы дать Vue подсказку, чтобы он мог отслеживать идентификатор каждого узла и, таким образом, повторно использовать и изменять порядок существующих элементов, вам необходимо предоставить уникальный ключевой атрибут для каждого элемента.

Ответ №2:

Вы можете попробовать добавить ‘/’ в свой путь : path: '/details/:key'