NUXT：使用有效负载重定向

Question

我正在尝试创建一个相当普通的东西，让我们认为它是一个博客。在客户端点击明信片会打开包含帖子内容的模式，并将查询 ?postID=123 添加到 URL。

当我们尝试访问my-site.com?postID=123 时，服务器中间件会检查是否有postID 查询参数，并使用301 重定向将我们重定向到my-site.com/category/subcategory/123。该中间件可能如下所示：

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() 中获取我的帖子。

我可以在nuxtServerInit 操作中将帖子发布到商店，但我认为这有点 hack。

所以问题是：有没有办法在重定向期间将一些数据传递给页面组件？

Answer 1

我相信是的，你可以做到。但是你需要知道一些事情。 如果你有一个命名路线，那就更简单了。只需执行以下操作：

    // 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)

但是，如果您没有创建命名路线，您可以做一些不太优雅的事情，但它会起作用...

看看这个链接https://router.vuejs.org/guide/essentials/navigation.html上的vue文档会很有趣。这里有很多信息可以更好地解释这一点。

但是让我们来看示例，假设您使用 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/