VueJS: $ router.pu sh не работает с параметрами запроса

Question

В моем приложении Nuxt JS (v. 2.10.2) у меня есть URL-адрес, подобный приведенному ниже, где pid - это идентификатор сообщения.

/ post? Pid = 5e4844e34202d6075e593062

Этот URL-адрес работает нормально и загружает сообщение в соответствии со значением, переданным параметру запроса pid. Однако пользователь может добавить новое сообщение, нажав кнопку Add Post на панели приложения, которая открывает диалоговое окно. Когда пользователь нажимает кнопку «Добавить», выполняется запрос к внутреннему серверу для сохранения запроса. При успешном завершении пользователь перенаправляется на новое сообщение, используя vue router push, как показано ниже

.then(data => {
  if (data) {
    this.$router.push({ path: `/post?pid=${data.id}` });
  }
})

Проблема в том, что пользователь не перенаправляется на новое сообщение, только параметр запроса pid обновляется. Я подозреваю, что VueJS не признает это как другой URL-адрес и, следовательно, ничего не делает.

Как это исправить?

Обновление: В качестве альтернативы попробовал приведенный ниже синтаксис, но получил то же поведение.

this.$router.push({ path: "post", query: { pid: data.id } });

Answer 1

Скажем, у вас есть компонент post.vue, который сопоставлен с /post URL.

Теперь, если вы перенаправите пользователя на /post?pid=13, компонент post.vue не будет снова подключен, если он уже подключен ie. когда вы уже на /post или /post?pid=12.

[1] В этом случае вы можете поставить watch на route, чтобы узнать, был ли изменен маршрут.

watch: {
 '$route.path': {
   handler (oldUrl, newUrl) {
     let PID = this.$route.query.pid
     // fetch data for this PID from the server.
     // ...
  }
 }
}

ИЛИ

[2] Если компонент post.vue сопоставлен с каким-либо маршрутом, скажем, /post.

Вы также можете использовать жизненный цикл -> beforeRouteUpdate, предоставленный vue-router

beforeRouteUpdate (to, from, next) {
  let PID = to.query.pid
  // fetch data for this PID from the server.
  // ...
  next()
}

Answer 2

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

Вместо того, чтобы пытаться снова вывести sh на ту же страницу с другой строкой запроса. Сама строка запроса pid может отслеживаться на предмет изменений, и при обновлении могут быть получены новые данные и данные компонента могут быть обновлены. В приложениях Nuxt JS (v. 2.10.2) это может быть достигнуто с помощью watchQuery. watchQuery - это свойство Nuxt JS, которое отслеживает изменения в строках запроса. И как только он обнаруживает изменение, вызываются все методы компонента (asyncData, fetch, validate ..). Вы можете прочитать больше https://nuxtjs.org/api/pages-watchquery/

Что касается решения, нажатие на ту же страницу с новой строкой запроса остается прежним.

.then(data => {
  if (data) {
    this.$router.push({ name: 'post', query: { pid: data.id } });
  }
})

Однако на стр. vue, где данные выбираются с сервера. Нам нужно добавить свойство watchQuery.

watchQuery: ["pid"],
async asyncData(context) {
  let response = await context.$axios.$get(
    `http://localhost:8080/find/id/${context.route.query.pid}`
  );
  return { postData: response };
},
data: () => ({
  postData: null
})

Теперь, каждый раз, когда будет вызываться строка запроса pid, будет asyncData вызываться. И это все. Простое исправление для обновления данных компонента при изменении значения строки запроса.

Answer 3

попробуйте это:

.then(data => {
  if (data) {
    this.$router.push('/post?pid=' + data.id);
  }
})

надеюсь, что это работает !!!

Answer 4

попробуйте это решение

.then(data => {
  if (data) {
    this.$router.push({ name: 'post', query: { pid: data.id } });
  }
})

подсказки:

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })