当前位置：首页 > article >正文

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

article 2024/10/24 7:34:05

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

Alt

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

Vue 3 中实现自定义 404 页面的三种方法
- 方法 1：使用 `catch-all` 路由
- 方法 2：使用导航守卫
- 方法 3：使用 `onBeforeResolve` 导航守卫
- 注意事项

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

在开发 Vue 3 应用时，我们经常会遇到需要处理不存在的路由或页面的情况。这时，一个自定义的 404 页面就显得尤为重要。以下是在 Vue 3 和 Vue Router 4 中实现 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;