Nuxt.js中程序化重定向至错误页面的方法

// 原始Vuex action中的错误处理尝试
async fetchVotes ({ commit }) {
  try {
    const response = await this.$secured.get('exampleapi.com/votes')
    // ... processing
    commit(SET_VOTES_LIST, merged)
  } catch (err) {
    console.log(err)
    // 这里的this.$error()可能无法使用
    // this.$error({ statusCode: err.code, message: err.message })
  }
}

// 更新后的Vuex action示例
async fetchVotes ({ commit }) {
  try {
    const response = await this.$secured.get('exampleapi.com/votes')
    const merged = jsonApiMerge(response.data.included, response.data.data)

    // ... processing data

    commit(SET_VOTES_LIST, merged)
  } catch (err) {
    console.error('API请求失败:', err) // 记录错误便于调试
    // 使用this.$nuxt.error()重定向到错误页面
    // 错误信息可以根据实际情况定制
    return this.$nuxt.error({
      statusCode: err.response ? err.response.status : 500, // 优先使用响应状态码
      message: err.response ? err.response.data.message : '数据加载失败，请稍后再试。'
    })
  }
}

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面未找到</h1>
    <h1 v-else>发生了一个错误</h1>
    <p>{{ error.message }}</p>
    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>

<script>
export default {
  props: ['error'], // Nuxt会自动将错误对象作为'error' prop传递
  layout: 'error-layout' // 可以为错误页面指定一个特殊的布局
  // 或者不指定，使用默认布局
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 20px;
  background-color: #f8f8f8;
  color: #333;
}
h1 {
  font-size: 2.5em;
  color: #d9534f;
  margin-bottom: 20px;
}
p {
  font-size: 1.2em;
  margin-bottom: 30px;
}
a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
a:hover {
  background-color: #0056b3;
}
</style>