vue.js - 如何从 Nuxt 商店导航到错误页面

Question

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
  }
}

在 axios 的 catch 中捕获错误后，希望从 导航到错误页面。 Nuxt 商店 .实现这一目标的最佳方法是什么？

Answer 1

在您的 catch您可以通过以下方式将用户重定向到错误页面

return this.$nuxt.error({ statusCode: 404, message: 'Your error message' })

并在您的 error.vue您可以使用错误 Prop 访问它，例如:

<h1>{{ error.statusCode }}</h1>
<h2>{{ error.message }} </h2>