Навигация с помощью Vue router-link изменяет только параметры запроса, а не путь

Question

В Vue.js я использую <router-link> для навигации, например:

<router-link :to="{ path: '/', query: { q: item.id, lang: lang } }">{{item.name}}</router-link>

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

Если я добавлю обработчик beforeRouteUpdate на свой компонент, я вижу, чтоновые параметры запроса появляются в объекте «to».

Как заставить Vue выполнять навигацию, даже если изменились только параметры запроса?

Answer 1

Скорее всего, вы уже решили эту проблему, поэтому этот ответ может быть полезен для других с этой проблемой.

Ссылка на документацию - Встроенные средства защиты - beforeRouteUpdate

Если я добавлю ловушку beforeRouteUpdate на свой компонент, я вижу, что новые параметры запроса появляются в объекте "to"

Это означает, что вы все делаете правильно, так как видите новыйпараметры в компоненте guard, так что далее, что вам нужно сделать, это сделать, как описано ниже в документах и ​​примере

Выборка после навигации

Так что все, что у вас теперь естьсделать, это получить ваши новые данные, используя эти новые параметры

  beforeRouteUpdate (to, from, next) {
     this.post = null
     // replace `getItem` with your data fetching util / API wrapper

     getItem(to.params.q, to.params.lang, (err, post) => {
       this.post = post
     next()
  })
 }