Vue router的addRoute方法实现控制权限方法详解

router.beforeEach((to,from,next)=>{
    console.log(router);/* 路由对象 */
    console.log(router.options.routes);/* 前端路由实例对象数组(根组) */
    console.log(router.options.routes[0]);/* 需要在里面动态添加子路由的一个根组,插入的也是这个根组对象 */
    console.log(router.options.routes[0].children);/* 获取这个根组下的子路由数组 */
/*纯粹的一次添加路由，其实通过服务器根据权限获取路由信息*/
    if(router.options.routes[0].children.length == 4 && to.path!="/login"){
        router.options.routes[0].children.unshift({path:"test",component:()=>import("@/views/test.vue")})
        router.addRoute(router.options.routes[0]);
        next({
            path: to.path, // 动态添加一个新的路由
            replace: true // 重定向,为了让刚刚添加的路由规则生效
        });
     }else{
         next();
    }   
})

let newT = router.options.routes[0];/* 需要在里面动态添加子路由的一个根组,插入的也是这个根组对象 */
if (newT.children.length == 4 && to.path != "/login") {//条件保护，防止全局路由守卫死循环执行。
    newT.children.unshift({
        path: "test",
        component: () => import("@/views/test.vue")
    }) //给子路由添加一条数据
    router.addRoute(newT);
    next({
        path: to.path,
        replace: true
    });
} else {
    next()
}

next({
    path: to.path, // 动态添加一个新的路由
    replace: true // 重定向,为了让刚刚添加的路由规则生效
});