vue.js（v3）使用错误组件而不更改URL

Question

我已经搜索和修补了一段时间，没有任何运气。我希望能够捕获错误并显示一个“糟糕”页面。需要明确的是，这不是大约404页（正常工作）。

为了简单起见，我已经减少了这一点，但是在下面的页面加载之前，它“尝试可能失败的东西”。失败后，我导航到/error显示错误页面：

const router = createRouter({ 
  routes: [
    {
      path: '/',
      component: Index
    },
    {
      path: '/something',
      component: Something
    },
    {
      path: '/error',
      component: Error
    },
    {
      path: '/:catchAll(.*)',
      component: NotFound
    }
  ]
})

router.beforeEach(async (to, from, next) => {
  // attempt something which may fail
})

router.onError(() => router.push('/error'))

这一切都很好，但这意味着/error路径是可导航的，并且路径更改发生。我希望的是，如果发生错误，则可以显示错误组件（错误）的方法。

假设我在/上，然后我导航到/sosings，但是“某物失败”，URL路径将等于，但是错误组件将被使用，而不是某物组件。

有什么想法吗？看来这应该是可以管理的，但是到目前为止，我已经空白了。

谢谢

Answer 1

AS duannx 上面评论，解决方案是使用状态来控制这一点。以下是我这样做的方法：

我创建了一个PINIA商店来容纳一个错误变量：

import { defineStore } from 'pinia'

export const useGlobalStore = defineStore({
  id: 'global',
  state: () => ({
    _error: false
  }),
  getters: {
    error: (state) => state._error
  },
  actions: {
    async setError(value) {
      this._error = !!value
    }
  }
})

在路由器中，我捕获任何错误：

import { createRouter, createWebHistory } from 'vue-router'
import { useGlobalStore } from '../stores/global'
import routes from './routes'

const history = createWebHistory(import.meta.env.BASE_URL)
const router = createRouter({ history, routes })

router.beforeEach(async (to, from, next) => {
  const globalStore = useGlobalStore()

  try {
    // Things which may fail here
    next()
  } catch (error) {
    globalStore.setError(true)
    return next()
  }
})

export default router

在root组件（app.vue）中，然后检查错误状态。 ，并根据是否设置错误状态来显示该视图或路由器视图。

<template>
  <Error v-if="globalStore.error" />
  <RouterView v-else />
</template>

这很好，谢谢Duannx。