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（），如果找不到博客帖子，我推（＆＃39; / 404＆＃39;）显示漂亮＆＃ 34;未找到＆＃34;页面和html被发送回浏览器。

然后，主要是因为浏览器中的URL没有改变，在水化过程中一切都很糟糕，因为VueJS仍在尝试渲染BlogPost组件而不是404.

我的问题是，我可以在我的窗口中设置更新的网址。 INITIAL_STATE ？或者我可以以某种方式更改浏览器中的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' })
        })
    }
}

asyncData中的Vuejs + SSR + router.push（）

1 个答案: