IT이야기

Nuxt 저장소에서 오류 페이지로 이동하는 방법

cyworld 2022. 5. 14. 22:34
반응형

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

반응형