programing

비동기 데이터 내의 Vuej + SSR + router.push()

goodsources 2022. 8. 11. 22:22
반응형

비동기 데이터 내의 Vuej + SSR + router.push()

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()가 실행되기 때문입니다.블로그 투고를 찾을 수 없는 경우 push('/404')를 누르면 예쁜 "Not found" 페이지가 표시되고 html이 브라우저로 반환됩니다.

그 후 주로 브라우저의 URL이 변경되지 않았기 때문에 수화 처리 중에 VueJ가 404가 아닌 BlogPost 컴포넌트를 렌더링하려고 하기 때문에 모든 것이 중단됩니다.

궁금한 점은 업데이트된 URL을 내 창에서 설정할 수 있는지 여부입니다.이니셜_스테이트?아니면 브라우저에서 URL을 변경할 수 있나요?

명확하지 않다면 질문에 필요한 모든 것을 추가할 수 있습니다.

음, 알아냈지만 업데이트는 안 했어요.안 하는 것보다는 지금 하는 게 낫지

또한 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' })
        })
    }
}

언급URL : https://stackoverflow.com/questions/48526292/vuejs-ssr-router-push-in-asyncdata

반응형