asyncData 中的 Vuejs + SSR + router.push()答案

【问题标题】：Vuejs + SSR + router.push() in asyncDataasyncData 中的 Vuejs + SSR + router.push()
【发布时间】：2018-07-09 15:01:37
【问题描述】：

我有一个 VUEJS SSR 设置，但不知道如何解决这个问题。

我的路线是这样的：

{
  path: '/:blogSlug', component: BlogPost, name: 'blog-post'
}

然后在 asyncData 函数中我有这段代码：

asyncData({store, route, router}) {
            let slug = route.params.blogSlug

            if (!store.state.blog.posts[slug]) {
                return store.dispatch('FETCH_BLOG_POST', { slug: slug }).catch((error) => {
                    console.log("error - pushing to /404")
                    router.push('/404');
                })
            }

            return(Promise.resolve());
        }

如果我禁用我的 javascript，这现在可以工作，主要是因为在服务器上执行 asyncData()，然后如果找不到博客文章，我推送 ('/404')，它显示一个漂亮的“未找到”页面和 html被发送回浏览器。

然后，主要是因为浏览器中的 URL 没有改变，在水合过程中一切都失败了，因为 VueJS 仍在尝试渲染 BlogPost 组件而不是 404。

我的问题是，我可以在我的窗口中设置更新后的 url。INITIAL_STATE？或者我可以通过浏览器更改网址吗？

如果不清楚，我可以将您需要的所有内容添加到问题中。

【问题讨论】：

标签： javascript vuejs2 vue-component vue-router server-side-rendering

【解决方案1】：

好吧，我想通了，没有更新。还不如现在做总比不做好。

Nuxt 还提供了一个error 函数作为asyncData 中的参数。

通过以下方式解决：

asyncData({store, route, router, error}) {
    let slug = route.params.blogSlug

    if (!store.state.blog.posts[slug]) {
        return store.dispatch('FETCH_BLOG_POST', { slug: slug }).catch((error) => {
            console.log("error - pushing to /404")
            error({ statusCode: 404, message: 'Post not found' })
        })
    }
}

【讨论】：