首先先给大家说一下思路

1. 首先提前编写过滤器的函数
2. 将固定的路由和业务路由分开管理，将固定路由设置默认所有用户都可以访问的路由，给业务路由添加用户访问权限
3. 在登录成功的时候保存token及userinfo之后，调用过滤路由之前的函数，过滤用户有权限访问的业务路由
4. 将过滤的出来的路由，用forEach遍历，并且使用addRoute动态添加router中
5. 正常访问路由

 编写过滤器的文件  -----比如authorization.js

function hasAuth( permission, permissions ){
    //判断是否有访问该路由的权限 , 结果是 true/false
    return permissions.includes(permission);
}


/* 
    功能: 拿到一个路由, 用户的权限列表, 判断这个路由是否在用户的权限列表中, 返回ture/false
    返回值: true 表示用户有访问该路由的权限, false表示用户没有访问该路由的权限
    参数一: route 路由 , 例如: {path: '',meta:{permission:2},component: Register}
    参数二: permissions 用户的权限列表 , 例如:  [1, 11, 2]
*/
function hasPermission( route, permissions ){
    //需要权限才能访问
    if( route.meta && route.meta.permission ){
        //判断是否有访问该路由的权限 , 结果是 true/false
        return permissions.includes(route.meta.permission);
    //不需要权限就可以访问    
    }else{ 
        return true;
    }
}

/* 
    功能: 拿到业务路由表,用户的权限列表, 根据用户的权限列表从业务路由表中过滤出用户有权限访问的路由.
    参数一: routes 业务路由表 , 例如: [{path: '',meta:{permission:2},component: Register},...]
    参数二: permissions 用户的权限列表 , 例如:  [1, 11, 2]
*/
export function filterRoutes( routes, permissions ){
    var accessRoutes = [];
    //过滤routes这个路由表
    accessRoutes = routes.filter((route)=>{
        //判断: 如果route表示的路由规则在用户的权限列表中,则用户有权限访问该路由,该路由就需要过滤出来.
        if( hasPermission( route, permissions ) ){
            //如果route 这个路由有子路由表, 则继续过滤子路由表
            if( route.children && route.children.length ){
                //继续过滤子路由表( 调用 filterRoutes 自身 过滤子路由表 )
                route.children = filterRoutes( route.children, permissions )
            }
            return true;
        }else{
            return false;
        }
    })

    //返回最终过滤出来的 用户有权限访问的路由.
    return accessRoutes;
}

将业务路由分割出来，单独管理------routes.js

//业务路由( 必须经过权限过滤才可以决定 用户能访问哪些路由 )
//添加一个判断的变量  通过后端返回的数据与你自己设定的参数变量对比看是否存在    我在这里设置的是permission
export default [
    {
        path: '/index',
        name: 'index',
        meta: {title:'考勤管理'},
        component: () => import('../views/Index.vue'),
        children:[
            {
                path: '/index/business',
                name: 'business',
                meta: {title:'出差申请', permission: 11 },
                component: () => import('../views/Index/Business.vue'),
            },
            {
                path: '/index/outside',
                name: 'outside',
                meta: {title:'外勤打卡', permission: 12 },
                component: () => import('../views/Index/Outside.vue'),
            },
            {
                path: '/index/leave',
                name: 'leave',
                meta: {title:'请假申请', permission: 13 },
                component: () => import('../views/Index/Leave.vue'),
            },
            {
                path: '/index/work',
                name: 'work',
                meta: {title:'加班申请', permission: 14 },
                component: () => import('../views/Index/Work.vue'),
            },
            {
                path: '/index',
                redirect:'/index/business'
            },
            {
                path: '/index/:error(.*)',
                component: () => import('../views/NotFound.vue')
            },
        ]
    },
    {
        path: '/register',
        name: 'register',
        meta: {title:'考勤管理-注册', permission: 2 },
        component: () => import('../views/Register.vue')
    }
]

在登录页面login.vue里面设置路由权限-----记得引入文件  

 import routes from '../router/routes' //来源于业务列表
//保存token,userinfo
        localStorage.setItem('token',res.data.token);
        localStorage.setItem('userinfo',JSON.stringify( res.data.userinfo ));

        //!!!!!!!!!!!!!!!!!!!!! 以下两步必须写在登陆成功并且保存token及userinfo之后,跳转首页之前 !!!!!!!!!!!!!!!!!!!!! 
        //过滤出当前用户有权限访问的业务路由
        var accessRoutes = filterRoutes( routes , res.data.userinfo.role.permissions )
        console.log(accessRoutes);

        //将过滤出来的路由 动态添加到router中
        accessRoutes.forEach((route)=>{
          $router.addRoute(route); //循环一次, 添加一条路由
        })
        
        //$router.addRoutes(accessRoutes); //Vue2中可以一次性添加所有路由.

        // 跳转首页
        $router.push('/');

解决刷新页面路由被路由权限规则顶掉的问题-----在main.js中设置以下代码即可（注意顺序必须在router实例之前，否则代码不生效）

var permissions = JSON.parse( localStorage.getItem('userinfo') ).role.permissions;
//动态过滤用户又权限访问的路由
var accessRoutes = filterRoutes( routes , permissions )
console.log(accessRoutes);

//将过滤出来的路由 动态添加到router中
accessRoutes.forEach((route)=>{
    router.addRoute(route); //循环一次, 添加一条路由
})

app.use(router)