动态路由目的

简单来说，就是做了权限设置的一些路由，当满足权限，能够进行访问

问题

404页面是要写在所有路由的最后面的，用通配符*进行判定，所有问题就是这个【404路由（path：*）要写在最后】

  • 在固定路由表中当然没有问题，直接写在最后
  • 在动态路由中就有问题了，因为动态路由表由（固定表+动态表）构成

那么把404路由放到动态表的最后不就行了？当然不行，或者说这样做不符合常规，动态表中的都是权限路由，404不属于权限部分。要做的就是在总的路由表中把404路由放到最下面。

做法：

//router.js
export const constantRouterMap = [{}...]//固定路由表
export const asyncRouterMap = [{}...]//权限（动态）路由表
export default new Router({ //router实例
  mode: 'history',
  routes: constantRouterMap
})

//将404路由单独提出来
//notFoundRouterMap.js
import Layout from '@/layout/layout'
export default [
  {
    path: '*',
    name: '404',
    component: Layout,
    hidden: true,
    redirect: '404',
    meta: {
      title: '404'
    },
    children: [
      {
        path: '404',
        name: 'err0r',
        component: () => import('@/views/error-page/index'),
        meta: { icon: 'svg-aperture', title: '404' }
      }
    ]
  }
]

关键的一步：

//在配置权限的permission.js下
// 路由全局前置守卫
const whiteList = ['/login', '/register'] // 白名单
router.beforeEach((to, from, next) => {
 ...
         const permissions = resp.permission
            store.dispatch('GenerateRoutes', { permissions})
            .then(() => {
                // 动态添加可访问路由表
                router.addRoutes(store.getters.addRouters,notFoundRouterMap)
                 //动态路由+将404路由添加到最后
      
 ...
})
赏

爬。