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

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

创新互联建站专注于企业营销型网站建设、网站重做改版、武陵源网站定制设计、自适应品牌网站建设、H5场景定制商城网站制作、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为武陵源等各大城市提供网站开发制作服务。

总体思路

无论单页还是多页,我的实现思路是总体配置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'
 }
 ],
})

本文名称:Vue单页及多页应用全局配置404页面实践记录-创新互联
URL分享:http://scyanting.com/article/docdis.html