Vue 3 中实现自定义 404 页面的三种方法

方法 1：使用 catch-all 路由

在路由配置中添加一个捕获所有路径的路由是一个简单有效的方法。这个路由通常放在路由列表的最后，以确保它能够捕获所有未被前面的路由匹配到的路径。

import { createRouter, createWebHistory } from 'vue-router';
import YourNotFoundComponent from './components/YourNotFoundComponent.vue';

const routes = [
  // ...其他路由配置
  {
    path: '/:catchAll(.*)', // 捕获所有路径
    name: 'NotFound',
    component: YourNotFoundComponent
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在这里，:catchAll(.*) 是一个动态路径，它会匹配任何路径，并将其作为参数传递给 YourNotFoundComponent 组件。

方法 2：使用导航守卫

Vue Router 的导航守卫提供了一个强大的机制来检测和处理路由变化。你可以使用 beforeEach 守卫来检查即将进入的路由是否有效，如果无效，则重定向到 404 页面。

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import NotFound from './views/NotFound.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // ...其他路由配置
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.beforeEach((to, from, next) => {
  if (!router.getRoutes().some(route => route.name === to.name)) {
    next({ name: 'NotFound' });
  } else {
    next();
  }
});

export default router;

方法 3：使用 onBeforeResolve 导航守卫

如果你希望在路由解析之前就拦截请求，可以在路由配置中使用 onBeforeResolve 守卫。这允许你在路由被实际解析前就进行一些操作，如重定向到 404 页面。

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import NotFound from './views/NotFound.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    onBeforeResolve: (to, from, next) => {
      if (to.name === 'NonExistentRoute') {
        next({ name: 'NotFound' });
      } else {
        next();
      }
    }
  },
  {
    path: '/404',
    name: 'NotFound',
    component: NotFound
  }
  // ...其他路由配置
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;