Vue单页及多页应用全局配置404页面实践记录-创新互联

前后端分离后，控制路由跳转的责任转移到了前端，后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目，均采用vue作为基础框架，一个是SPA应用，另一个是多页应用，均由前端进行路由控制及渲染的。

总体思路

无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由，渲染相应的404页面。同时，配置一个规则，当在用户可访问的路由表中的所有路由都无法匹配的时候，自动跳转重定向至该404页面。下面来说一下针对单页和多页，我不同的实现方式。

SPA的404路由配置

单页应用配置404页面，也区分两种情况：

路由表固定的情况

如果SPA的路由表是固定的，那么配置404页面就变得非常的简单。只需要在路由表中添加一个路径为 404 的路由，同时 在路由表的最底部 配置一个路径为 * 的路由，重定向至404路由即可。

（由于路由表是由上至下匹配的，一定要将任意匹配规则至于最底部，否则至于此路由规则下的路由将全部跳转至404，无法正确匹配。）

// router.js
export default new Router({
 mode: 'history',
 routes: [
 // ...
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 {
 path: '*', // 此处需特别注意至于最底部
 redirect: '/404'
 }
 ],
})