Блог

Я пытаюсь создать довольно обычную вещь, давайте подумаем, что это блог. На стороне клиента щелчок по почтовой карточке открывает модал с содержимым сообщения и добавляет запрос ?postID=123 к URL.

Когда мы пытаемся зайти my-site.com?postID=123 , промежуточное программное обеспечение сервера проверяет, есть ли postID параметр запроса, и перенаправляет нас my-site.com/category/subcategory/123 с помощью перенаправления 301. Это промежуточное программное обеспечение может выглядеть следующим образом:

 export default async function ({ route, redirect, api }) {
  const postID = route.query.postID;
  if (!postID) return;

  const post = await api.get('postID')

  redirect(301, `/${post.category}/${post.subcategory}/${postID}`);
}
 

Это работает, но для создания ссылки с категорией и подкатегорией у меня уже есть свой пост. И на _post странице, на которую мы перенаправлены, я должен снова отправить свой пост в asyncData() или fetch() .

Я могу запустить post в хранилище nuxtServerInit , но, на мой взгляд, это немного халтурно.

Итак, вопрос в следующем: есть ли какой-либо способ передать некоторые данные компоненту страницы во время перенаправления?

Я считаю, что ДА, вы можете это сделать. Но вам нужно знать несколько вещей. Если у вас есть именованный маршрут, это проще. Просто сделайте следующее:

     // pass params to named route
    this.$router.push ({name: 'user', params: {userId: '123'}})
    
    // get params from named route in other component
    console.log(this.$router.params)
 

Однако, если у вас нет созданного именованного маршрута, вы можете сделать что-то менее элегантное, но оно будет работать…

Было бы интересно взглянуть на документацию vue по этой ссылке https://router.vuejs.org/guide/essentials/navigation.html . Вот много информации, объясняющей это лучше.

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

 this.$router.push(
{
  path: 'YOUR/PATH',
},
// onComplete Function
(myValue) => {

    // save the value in localStorage
  localStorage.setItem('VALUE', JSON.stringify(myValue))

  // to retrieve the value you can get with
  console.log(JSON.parse(localStorage.getItem('VALUE')))

  // save the value in store with vuex
  this.$store.dispatch('doSomethingFromAction', myValue)
  this.$store.commit('doSomethingFromMutation', myValue)

  // to retrieve the value you can get with
  console.log(this.$store.state.myValue)
})
 

Если вы не знаете vuex, загляните в документы: https://vuex.vuejs.org /