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

Question

我有一个 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 没有改变，在 hydration 过程中一切都失败了，因为 VueJS 仍在尝试渲染 BlogPost 组件而不是 404。

我的问题是，我可以在我的窗口中设置更新的 url。初始状态？或者我可以以某种方式从浏览器更改 URL？

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

Answer 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' })
        })
    }
}