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

无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由，渲染相应的404页面。这篇文章主要介绍了Vue单页及多页应用全局配置404页面实践,需要的朋友可以参考下
前后端分离后，控制路由跳转的责任转移到了前端，后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目，均采用vue作为基础框架，一个是SPA应用，另一个是多页应用，均由前端进行路由控制及渲染的。
总体思路
无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由，渲染相应的404页面。同时，配置一个规则，当在用户可访问的路由表中的所有路由都无法匹配的时候，自动跳转重定向至该404页面。下面来说一下针对单页和多页，我不同的实现方式。
SPA的404路由配置
单页应用配置404页面，也区分两种情况：
路由表固定的情况
如果SPA的路由表是固定的，那么配置404页面就变得非常的简单。只需要在路由表中添加一个路径为 404 的路由，同时 在路由表的最底部 配置一个路径为 * 的路由，重定向至404路由即可。
（由于路由表是由上至下匹配的，一定要将任意匹配规则至于最底部，否则至于此路由规则下的路由将全部跳转至404，无法正确匹配。）

1. // router.js
2. export default new Router({
3. mode: 'history',
4. routes: [
5. // ...
6. {
7. name: '404',
8. path: '/404',
9. component: () => import('@/views/notFound.vue')
10. },
11. {
12. path: '*', // 此处需特别注意至于最底部
13. redirect: '/404'
14. }
15. ],
16. })

复制代码

路由表动态生成的情况
路由表是动态生成的情况下，也就是说路由表分为两部分，一部分为基础路由表，另一部分是需要根据用户的权限信息动态生成的路由表。
本项目中动态生成路由采用vue-router自带的addRoutes方法，该方法是会将新的路由规则在原路由表数组的尾部注入的。由于任意匹配重定向至404页面的规则必须至于路由表的最底部，所以此处我将重定向至404页面的规则抽出，在动态路由注入后，再注入重定向规则，以确保该规则至于路由表最底部。

1. // router.js
2. export default new Router({
3. mode: 'history',
4. routes: [
5. // ...
6. {
7. name: '404',
8. path: '/404',
9. component: () => import('@/views/notFound.vue')
10. },
11. // ...other codes
12. ],
13. })
14. // notFoundRouterMap.js
15. export default [
16. {
17. name: '404',
18. path: '/404',
19. component: () => import('@/views/notFound.vue')
20. },
21. },
22. {
23. path: '*',
24. redirect: '/404'
25. }
26. ]
27. // main.js
28. //...other codes
29. router.beforeEach((to, from, next) => {
30. new Promise((resolve, reject) => {
31. if (getCookie(tokenName)) {
32. if (!getInfo()) {
33. Promise.all([store.dispatch('getBasicInfo'), store.dispatch('getUserDetail')]).then(res => {
34. store.dispatch('GenerateRoutes', { roles }).then(() => {
35. // 根据用户权限生成可访问的路由表
36. router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
37. router.addRoutes(NotFoundRouterMap) // 添加404及重定向路由规则
38. resolve({ ...to, replace: true }) // 重新加载一次路由，让路由表更新成功后走下面else的判断
39. })
40. })
41. } else {
42. // ...other codes
43. }
44. } else {
45. window.location.href = '/login.html'
46. }
47. }).then(res => {
48. if (res) {
49. next(res)
50. } else {
51. next()
52. }
53. }).catch(err => {
54. new Error(err)
55. next(false)
56. })

复制代码

多页应用的404路由配置
多页应用区别于SPA的不同点是每个页面有自己的一套路由，并且每个页面可能有自己的一套404页面风格，当然也可能没有。这时候，就不能再采用动态添加路由规则的方法了。
我采用的方案是在全局导航守卫beforeEach中对路由匹配的情况进行判断，这时候就需要用到vue导航守卫中的 matched 数组了。如果没有一个匹配上的，那么就重定向至404页面。当然，这个404页面也单独设置为一个页面。

1. // permission.js
2. //...other codes
3. router.beforeEach((to, from, next) => {
4. new Promise((resolve, reject) => {
5. // ...other codes
6. }).then(res => {
7. if (!to.matched.length) {
8. window.location = '/error.html#/404'
9. return
10. }
11. if (res) {
12. next(res)
13. } else {
14. next()
15. }
16. }).catch(err => {
17. new Error(err)
18. next(false)
19. })

复制代码

这个方案就允许每个页面有自己的404页面路由规则，并且为没有配置404页面的路由统一配置了默认的404页面，感觉还是比较友好的。
总结
以上所述是小编给大家介绍的Vue单页及多页应用全局配置404页面实践记录，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！