반응형
Nuxt 저장소에서 오류 페이지로 이동하는 방법
export const state = () => ({
data: {}
})
export const getters = {
data: state => state.data
}
export const actions = {
getData ({ commit }) {
this.$axios('https://jsonplaceholder.typicode.com/todosx/1')
.then((response) => {
commit('SET_DATA', response.data)
})
.catch((err) => {
// Navigate to error page
})
}
}
export const mutations = {
SET_DATA (state, data) {
state.data = data
}
}
공리에 대한 캐치에서 오류를 포착한 후 Nuxt 저장소에서 오류 페이지로 이동하려고 한다.이것을 이루기 위한 가장 좋은 방법은 무엇일까?
당신 안에catch
다음에 따라 사용자를 오류 페이지로 리디렉션할 수 있음
return this.$nuxt.error({ statusCode: 404, message: 'Your error message' })
그리고 당신 안에error.vue
다음과 같은 오류 소포로 액세스할 수 있는 페이지:
<h1>{{ error.statusCode }}</h1>
<h2>{{ error.message }} </h2>
이런 종류의 템플릿은 위에서 잘 작동해야 한다.$nuxt.error
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
}
</script>
문서에 표시된 대로: https://nuxtjs.org/docs/2.x/directory-structure/layouts#error-page
참조URL: https://stackoverflow.com/questions/69023015/how-to-navigate-to-error-page-from-nuxt-store
반응형
'IT이야기' 카테고리의 다른 글
Java에서 파일의 MD5 체크섬 가져오기 (0) | 2022.05.15 |
---|---|
침입 목록 (0) | 2022.05.14 |
2단계 하위 개체에 대해 Vue.set 반응성이 작동하지 않음 (0) | 2022.05.14 |
vuej의 다른 구성 요소에서 구성 요소의 데이터 속성을 업데이트하는 방법 (0) | 2022.05.14 |
vuejs 구성 요소에서 생성된 후크에서 메서드 호출 (0) | 2022.05.14 |