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实现页面打印的三种方法
Mar 05 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
python的变量与赋值详细分析
2017/11/08 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python后端接收前端回传的文件方法
2019/01/02 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
JAVA程序员面试题
2012/10/03 面试题
关于运动会的口号
2014/06/07 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
TS 类型兼容教程示例详解
2022/09/23 Javascript