Vue单页及多页应用全局配置404页面实践记录 - CSDN文库

vue单页应用

71 浏览量更新于2023-03-16 收藏 57KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

Vue单页及多页应用全局配置单页及多页应用全局配置404页面实践记录页面实践记录

无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路

由，渲染相应的404页面。这篇文章主要介绍了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'

}

],

})

路由表动态生成的情况路由表动态生成的情况

路由表是动态生成的情况下，也就是说路由表分为两部分，一部分为基础路由表，另一部分是需要根据用户的权限信息动态生

成的路由表。

本项目中动态生成路由采用vue-router自带的addRoutes方法，该方法是会将新的路由规则在原路由表数组的尾部注入的。由

于任意匹配重定向至404页面的规则必须至于路由表的最底部，所以此处我将重定向至404页面的规则抽出，在动态路由注入

后，再注入重定向规则，以确保该规则至于路由表最底部。

// router.js

export default new Router({

mode: 'history',

routes: [

// ...

{

name: '404',

path: '/404',

component: () => import('@/views/notFound.vue')

},

// ...other codes

],

})

// notFoundRouterMap.js

export default [

{

name: '404',

path: '/404',

component: () => import('@/views/notFound.vue')

},

},

{

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38500444

粉丝: 7
资源: 945

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈