动态路由目的
简单来说,就是做了权限设置的一些路由,当满足权限,能够进行访问
问题
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路由添加到最后
...
})
Comments | NOTHING