Vue роутер не стреляет, если только изменения пули - PullRequest
Новая
       10

Vue роутер не стреляет, если только изменения пули

0 голосов
/ 05 июля 2018

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

У меня есть следующие ссылки 

<router-link :to="{ path: '/tag/tag2' }">Tag 2</router-link>
<router-link :to="{ path: '/tag/tag3' }">Tag 3</router-link>
<router-link :to="{ path: '/category/cat1' }">Category 1</router-link>

которые обрабатываются router

{
  path: '/tag/:slug',
  name: 'Tag',
  component: () => import('./views/tag')
}

внутри views/tag.vue при загрузке выполняет запрос axios, чтобы получить все теги. Те же функции для категории и т. Д.

Допустим, текущий URL-адрес http://test.com/tag/tag1

Если вы нажмете ссылку для Tag 2, URL изменится, но больше ничего не произойдет. Нет axios звонки и т. Д.

Если я нажму Tag 3, URL изменится, но больше ничего не произойдет. Нет axios звонков и т. Д.

Если я нажму Category 1, тогда URL-адрес изменится, страница загрузит представление категории и запустит запрос оси.

Почему возникают проблемы, если меняется только пуля?

1 Ответ

0 голосов
/ 05 июля 2018

Я полагаю, что ваши вызовы axios находятся в одной из ловушек жизненного цикла компонента (т.е. beforeCreate). Проблема в том, что Vue Router пытается использовать компоненты везде, где это возможно. В вашем случае при переходе от /tag/tag1 к /tag/tag2 изменяется только параметр, поэтому он остается тем же компонентом, и маршрутизатор не создает его заново.

Есть два решения:

  1. Поместите вызовы axios в beforeRouteUpdate ловушку, что означает, что они будут срабатывать при каждом изменении маршрута в компоненте.
  2. Добавьте атрибут key к router-view, что заставит маршрутизатор воссоздать каждый компонент. 
<router-view :key="$route.fullPath"></router-view>

Источник: Пост от члена основной команды Vue'js

...