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

这篇文章也发在个人博客，欢迎围观😄

写在前面

先后端分离后，控制路由跳转的责任转移到了前端，后端只负责给前端返回一个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 [
  {
    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页面，感受仍是比较友好的。

最后

这是本人开发过程当中使用的方案，若是有更好的方法，请不吝告知，谢谢！

在作这个实践的时候，借鉴了很多兄弟的文章，在此列出，以表感谢！

1. 基于Vue2.0实现后台系统权限控制
2. 用addRoutes实现动态路由
3. how to create a 404 component in vuejs using vue-router