如何从 Nuxt 商店导航到错误页面

Posted 2023-02-22

【中文标题】如何从 Nuxt 商店导航到错误页面

【英文标题】：How to navigate to error page from Nuxt store

【发布时间】：2021-10-31 12:03:04

【问题描述】：

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 商店 导航到错误页面。实现这一目标的最佳方法是什么？

【问题讨论】：

this.$router.push('/404') 应该可以解决问题，因为它要么存在，要么将使用 error 布局，因为它无法到达页面。

顺便说一句，您可以在模板中使其更流畅并显示“此处无信息”而不是将用户移动到 404，您不觉得吗？

感谢您的回复。是的，想在此处显示自定义错误模板。因此，可以像在页面中一样发送类似 $nuxt.error( statusCode: 404, message: 'err message' ) 的内容。我试图在商店里做同样的事情，但不知道该怎么做。

【参考方案1】：

在您的catch 中，您可以通过

将用户重定向到错误页面

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

在您的error.vue 页面中，您可以使用错误道具访问它，例如：

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

【讨论】：

感谢您的回复。它确实在页面中工作，但在 vuex 存储中它给了我另一个错误 TypeError: Cannot read properties of undefined (reading 'error')。打印 this.$nuxt 时显示 undefined。有什么方法可以在 vuex 商店中访问 this.$nuxt 吗？

【参考方案2】：

这种模板应该可以在 $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