vue-router动态添加路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)


/* 项目静态路由 */
const routes = [{
  path:'/login',
  name:"login",
  component:() => import('../views/Login.vue')
}
,{
  path:'/',
  name:"mainCpntent",
  // redirect:'/welcome',
  component:() => import('@/layout/index.vue'),
}
]

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

export default router

/* 权限 */
import store from '@/store/index'
import router from '@/router';

// 动态路由
let routers = [{
    path: 'welcome',
    name: "welcome",
    component: () => import('@/views/Welcome.vue')
}, {
    path: 'people',
    component:() => import('@/views/People.vue'),
    name: "people"
}, {
    path: 'vip',
    component: () => import('@/views/Vip.vue'),
    name: 'vip'
}, {
    path: '404',
    component: () => import('@/views/404.vue'),
    name: '404'
}]


let done = true
router.beforeEach((to,from,next) => {
        /* 判断用户是否登录 */
    if(store.state.user.userInfo.token) {
        // 登录之后判断路由不为空拿到用户的路由权限信息
        console.log('from.path',from.path);
        let routes = routers.filter(item => store.state.user.userInfo.routes.indexOf(item.name) != -1)
        if(done) {
            routes.forEach(i => {
               if(router.getRoutes().find(item => item.name == i.name) == undefined){
                    router.addRoute("mainCpntent",{
                        name:i.name,
                        path:i.path,
                        component:i.component
                    }) // 第一个参数位需要在那个name名称的下面添加二级路由 第二个参数位要添加的路由的配置
               }
            })
            console.log(router.getRoutes());
        }
    }
    next()
})

export default router

import { login } from "@/Api/Login";

const user = {
    namespaced:true,
    state:{
        userInfo: JSON.parse(localStorage.getItem('x-userInfo')) || {} //用户信息
    },
    mutations:{
        /* 设置用户信息 */
        SET_USER_INFO(state,userInfo){
            state.userInfo = userInfo;
        },
        /* 持久化存储 */
        SAVE_USER_INFO(state,userInfo){
            localStorage.setItem('x-userInfo',JSON.stringify(userInfo))
        }
    },
    actions:{
        /* 登录 */
        async LOGIN(ctx,userInfo){
            let {data:res} = await login(userInfo).catch(err => {
                console.log('errr网络请求错误',err);
            })
            let {token,username,routes} = res
            let _userInfo = {token,username,routes}
            ctx.commit('SAVE_USER_INFO',_userInfo)
            ctx.commit('SET_USER_INFO',_userInfo)
        }
    }
}

export default user;