VueJS проталкивает маршрут с параметрами показывает старые параметры в браузере - PullRequest
Новая
       31

VueJS проталкивает маршрут с параметрами показывает старые параметры в браузере

2 голосов
/ 23 апреля 2019

Сценарий

У меня есть приложение, в котором я использую 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 имеют правильное значение.

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

Также использование 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
      },
    ]
  }]
});

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019

Вы можете попробовать добавить '/' на вашем пути: path: '/details/:key'

0 голосов
/ 25 апреля 2019

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

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

В соответствии с документами Vue JS,

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

...