关于vue-router当中addRoutes的使用

关于addRoutes

使用背景 ：
权限控制，判断用户是否有该页面的权限，可以使用router.addRoutes([设置路由])；
优点：当用户没有权限，在浏览器输入地址不会出现该页面，直接跳转到配置的404页面；

/* 默认初始路由 */

export default new Router({
    routes: [
        {
            path: '/login',
            component: Login
        }
    ]
})

/* 准备动态添加的路由 */
***这块可以通过后端接口获取该用户具有那些页面的权限

export const DynamicRoutes = [
	    {
	        path: '',
	        component: Layout,
	        name: 'container',
	        redirect: 'home',
	        meta: {
	            requiresAuth: true,
	            name: '首页'
	        },
	        children: [
	            {
	                path: 'home',
	                component: Home,
	                name: 'home',
	                meta: {
	                    name: '首页'
	                }
	            }
	        ]
	    },
	    {
	        path: '/403',
	        component: Forbidden
	    },
	    {
	        path: '*',
	        component: NotFound
	    }
	]

在vuex添加了一个permission模块来处理权限。

actions: {
async FETCH_PERMISSION({ commit, state }) {
/* 获取后台给的权限数组 */ 获取的路由
let permissionList = await fetchPermission()

    /*  初始路由 */
    let initialRoutes = router.options.routes

    /*  动态添加路由 */
    router.addRoutes(DynamicRoutes)

    /* 完整的路由表 */
    commit('SET_PERMISSION', [...initialRoutes, ...permissionList])
}

}