반응형
비동기 데이터 내의 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
반응형
'programing' 카테고리의 다른 글
컴포넌트가 정의되어 있지만 사용되지 않는 vars는 사용되지 않습니다. (0) | 2022.08.11 |
---|---|
Java에서의 문자열 암호화 방법 (0) | 2022.08.11 |
Nuxt.js에서 Vuetify 중단점이 작동하지 않음 (0) | 2022.08.11 |
호출하지 않고 실행 중인 계산 함수 (0) | 2022.08.11 |
for 루프의 현재 항목을 vue.js 2의 메서드에 전달하려면 어떻게 해야 합니까? (0) | 2022.08.11 |