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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
Javascript开发包大全整理
Dec 22 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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
Yii2选项卡的简单使用
2017/05/26 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
css图片自适应大小
2007/11/28 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python中几种导入模块的方式总结
2017/04/27 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
python实现停车管理系统
2018/11/30 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python安装whl文件过程图解
2020/02/18 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
名人演讲稿范文
2013/12/28 职场文书
物流司机岗位职责
2013/12/28 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2014年实习期工作总结
2014/11/27 职场文书
协议书范文
2015/01/27 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
create-react-app开发常用配置教程
2022/06/25 Javascript