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

🌟 前言

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

• 🤖 洛可可白：个人主页

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

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

• 🐱 代码获取：bestwishes0203

• 📷 封面壁纸：洛可可白wallpaper

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;

注意事项

• 确保你的 404 页面组件（如 YourNotFoundComponent 或 NotFound）已经正确导入。
• 根据你的应用需求，选择合适的方法来实现 404 页面的匹配。
• 如果你的应用使用了路由懒加载，确保在导航守卫中正确处理了这些路由。

通过这些方法，你可以灵活地在你的 Vue 3 应用中实现自定义的 404 页面，提升用户体验并处理不存在的路由请求。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀