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


Posted in Javascript onMay 22, 2018

前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个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')
 },
 },
 {
 path: '*',
 redirect: '/404'
 }
]
// main.js
//...other codes
router.beforeEach((to, from, next) => {
 new Promise((resolve, reject) => {
 if (getCookie(tokenName)) {
 if (!getInfo()) {
 Promise.all([store.dispatch('getBasicInfo'), store.dispatch('getUserDetail')]).then(res => {
 store.dispatch('GenerateRoutes', { roles }).then(() => { 
 // 根据用户权限生成可访问的路由表
 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
 router.addRoutes(NotFoundRouterMap) // 添加404及重定向路由规则
 resolve({ ...to, replace: true }) // 重新加载一次路由,让路由表更新成功后走下面else的判断
 })
 
 })
 } else {
 // ...other codes
 }
 } else {
 window.location.href = '/login.html'
 }
 }).then(res => {
 if (res) {
 next(res)
 } else {
 next()
 }
 }).catch(err => {
 new Error(err)
 next(false)
 })

多页应用的404路由配置

多页应用区别于SPA的不同点是每个页面有自己的一套路由,并且每个页面可能有自己的一套404页面风格,当然也可能没有。这时候,就不能再采用动态添加路由规则的方法了。

我采用的方案是在全局导航守卫beforeEach中对路由匹配的情况进行判断,这时候就需要用到vue导航守卫中的 matched 数组了。如果没有一个匹配上的,那么就重定向至404页面。当然,这个404页面也单独设置为一个页面。

// permission.js
//...other codes
router.beforeEach((to, from, next) => {
 new Promise((resolve, reject) => {
 // ...other codes
 }).then(res => {
 if (!to.matched.length) {
 window.location = '/error.html#/404'
 return
 } 
 if (res) {
 next(res)
 } else {
 next()
 }
 }).catch(err => {
 new Error(err)
 next(false)
 })

这个方案就允许每个页面有自己的404页面路由规则,并且为没有配置404页面的路由统一配置了默认的404页面,感觉还是比较友好的。

总结

以上所述是小编给大家介绍的Vue单页及多页应用全局配置404页面实践记录,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
原生JS实现幻灯片
Feb 22 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
Vue页面骨架屏的实现方法
May 22 #Javascript
Angular网络请求的封装方法
May 22 #Javascript
vue input输入框模糊查询的示例代码
May 22 #Javascript
vue 中swiper的使用教程
May 22 #Javascript
vue配置多页面的实现方法
May 22 #Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 #Javascript
详解js类型判断
May 22 #Javascript
You might like
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
JQuery插件开发示例代码
2013/11/06 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python定时器实例代码
2017/11/01 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
白酒业务员岗位职责
2013/12/27 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
测量工程专业求职信
2014/02/24 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis