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()，然后如果找不到博客 post，我将推送 ('/404')显示一个漂亮的 "Not found" 页面并且 html 被发送回浏览器。

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

我的问题是，我可以在 window.INITIAL_STATE 中设置更新后的 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' })
        })
    }
}

Vuejs + SSR + router.push() 异步数据

Vuejs + SSR + router.push() in asyncData

javascript

server-side-rendering

vue-router

vue-component

vuejs2