博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue单页及多页应用全局配置404页面实践
阅读量:6824 次
发布时间:2019-06-26

本文共 2778 字,大约阅读时间需要 9 分钟。

这篇文章也发在我的博客,

写在前面

前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目,均采用vue作为基础框架,一个是SPA应用,另一个是多页应用,均由前端进行路由控制及渲染的。

总体思路

无论单页还是多页,我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个path: '/404'的路由,渲染相应的404页面。同时,配置一个规则,当在用户可访问的路由表中的所有路由都无法匹配的时候,自动跳转重定向至该404页面。下面来说一下针对单页和多页,我不同的实现方式。

SPA的404路由配置

单页应用配置404页面,也区分两种情况:

路由表固定的情况

如果SPA的路由表是固定的,那么配置404页面就变得非常的简单。只需要在路由表中添加一个路径为404的路由,同时在路由表的最底部配置一个路径为*的路由,重定向至404路由即可。

(由于路由表是由上至下匹配的,一定要将任意匹配规则至于最底部,否则至于此路由规则下的路由将全部跳转至404,无法正确匹配。)

// router.jsexport default new Router({  mode: 'history',  routes: [    // ...    {      name: '404',      path: '/404',      component: () => import('@/views/notFound.vue')    },    {      path: '*',    // 此处需特别注意至于最底部      redirect: '/404'    }  ],})复制代码

路由表动态生成的情况

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

本项目中动态生成路由采用vue-router自带的addRoutes方法,该方法是会将新的路由规则在原路由表数组的尾部注入的。由于任意匹配重定向至404页面的规则必须至于路由表的最底部,所以此处我将重定向至404页面的规则抽出,在动态路由注入后,再注入重定向规则,以确保该规则至于路由表最底部。

// router.jsexport default new Router({  mode: 'history',  routes: [    // ...    {      name: '404',      path: '/404',      component: () => import('@/views/notFound.vue')    },    // ...other codes  ],})复制代码
// notFoundRouterMap.jsexport default [  {    path: '*',    redirect: '/404'  }]复制代码
// main.js//...other codesrouter.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 codesrouter.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页面,感觉还是比较友好的。

最后

这是本人开发过程中使用的方案,如果有更好的方法,请不吝告知,谢谢!

在做这个实践的时候,借鉴了不少兄弟的文章,在此列出,以表感谢!

转载地址:http://uorzl.baihongyu.com/

你可能感兴趣的文章
手把手教你 MongoDB 的安装与详细使用(二)
查看>>
根据Web服务器记录来追击黑客
查看>>
Java类和对象的初始化顺序
查看>>
ocs的部署与应用(一)
查看>>
Linux下查看文件和文件夹大小
查看>>
CsGL着色的三角形
查看>>
后端码农谈前端(CSS篇)第七课:定位与浮动
查看>>
springboot(十八):使用Spring Boot集成FastDFS
查看>>
何勉:第一性原理和精益敏捷的规模化实施
查看>>
处理 Oracle SQL in 超过1000 的解决方案
查看>>
AI领域三大范式的发展简史
查看>>
《云计算:原理与范式》一第2章 迁移到云2.1 引言
查看>>
《工业控制网络安全技术与实践》一一1.5 本章小结
查看>>
报道称土耳其屏蔽网盘和GitHub以防止邮件泄露
查看>>
美最大IDC服务商Equinix宣布将继续使用可再生能源
查看>>
大规模实时数据处理openPDC
查看>>
美司法部要求Facebook配合国税局查税
查看>>
Appium环境抢建(for web browser test)
查看>>
安防云计算核心技术探讨
查看>>
可从网站抓取数据的数据析取平台Import.io获1300万美元A轮融资
查看>>