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 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
js new Date()实例测试
Oct 31 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
Js图片点击切换轮播实现代码
2020/07/27 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python端口扫描简单程序
2016/11/10 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Python 操作 MySQL数据库
2020/09/18 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
施工人员岗位职责
2013/12/12 职场文书
教师申诉制度
2014/01/29 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
八年级物理教学反思
2016/02/19 职场文书
详解Nginx 工作原理
2021/03/31 Servers
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android