vue动态获取路由，动态添加路由

后端返回路由数组，前端生成router。

登录时获取路由，或者接口返回路由。

login.index

async handleLogin() {
      let res = await postUserLogin(this.loginForm);
      // console.log(res);
        if (res.status == 200) {
          localStorage.setItem("token", res.token);
          localStorage.setItem("user", JSON.stringify(res.user));
          localStorage.setItem("router", res.router);
          this.$router.push("/waterQuality");
        }
    },

路由配置基本路由数据，再进行拼接。

router.js

import Vue from "vue";
import Router from "vue-router";
import store from '../store'

Vue.use(Router);

// 公共路由
export const constantRoutes = [
	{
		path: '/login',
		name: 'login',
		meta: {
			//role: 'admin,root,project,operate,maintain,normal', //权限
		},
		component: () => import('@/views/login/index.vue')
	},
	{
		path: '*',
		meta: {
			// role: 'admin,root', //权限
		},
		component: () => import('@/views/errorPage/404.vue')
	},
];

const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(to) {
	return VueRouterPush.call(this, to).catch(err => err)
}

const router = new Router({
	scrollBehavior: () => ({
		y: 0
	}),
	routes: constantRoutes
})


//白名单
const whiteList = ['/login']

router.beforeEach((to, from, next) => {

	if (window.globalConfig.login) {

		if (localStorage.getItem('token')) {
			if (to.path === '/login') {
			  next({ path: '/' })
			} else {
			// 判断当前用户是否已拉取完路由信息
			  if (store.getters.roleRouter.length === 0) {
				//生成路由
				  store.dispatch('GenerateRoutes').then(accessRoutes => {
				  
					// 根据roles权限生成可访问的路由表
					router.addRoutes(accessRoutes) // 动态添加可访问路由表
					next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
				  })
				
			  } else {
				next()
			  }
			}
		  } else {
			// 没有token
			
			if (whiteList.indexOf(to.path) !== -1) {
				// 在免登录白名单，直接进入
				next()
			  } else {
				next({ path: '/login' });
			  }
		  }

	} else {
		next();
	}
})


export default router;

操作vuex，路由存放于vuex中。

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);


const store = new Vuex.Store({
	state: {
		//路由处理
		routes: [],
		addRoutes: [],
		mList: [],
		btnRoleList:[]
	},
	getters: {
		roleRouter: state => {
			return state.routes;
		},
		addRoutes: state => {
			return state.addRoutes;
		},
		menu: state => {
			return state.mList;
		},
		btnRoleList:state => {
			return state.btnRoleList;
		},
	},
	mutations: {
		getBtnList:(state) => {
			let id = JSON.parse(localStorage.getItem("user")).roleId
			let data={
				roleId:id
			}
			getButtonRouter(data).then(res => {
				console.log('按钮列表',res.data,id)
				state.btnRoleList = res.data
			  })
			
		},
		DEL_ROUTES: (state, value) => {
			state.addRoutes = []
			state.routes = []
		},
		//设置路由
		SET_ROUTES: (state, routes) => {
			state.addRoutes = routes
			state.routes = constantRoutes.concat(routes)
		},
		//设置菜单
		SET_Menu: (state, list) => {
			state.mList = list
		},
	},
	actions: {
		// 生成路由
		GenerateRoutes({ commit }) {
			return new Promise(resolve => {
				// 向后端请求路由数据
				/* getRouters().then(res => {
				  const accessedRoutes = filterAsyncRouter(res.data)
				  //accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
				  commit('SET_ROUTES', accessedRoutes)
				  resolve(accessedRoutes)
				}) */
				//取登录时返回的数据
				let list = JSON.parse(localStorage.getItem("router"))
				console.log('原始路由', list)
				let allRouter = [
					{
						path: '/',
						name: 'Home',
						redirect: "/waterQuality",
						component: () => import('@/views/Home.vue'),
						children: [
							{
								path: '/waterQuality',
								name: 'waterQuality',
								meta: {
									keepAlive: true, // 需要被缓存
									title: '首页', //页面名
									icon: 's-home', //图标
									role: 'admin,root,project,operate,maintain,normal', //权限
									index: '/waterQuality',
								},
								component: () => import('@/views/waterQuality/waterQuality.vue')
							},
							...filterRouter(list)
						]
					}
				]

				
				//生成菜单
				let allmenu = [
					{ name: "首页", index: "/waterQuality", icon: "s-home" },
					...filterMenu(list)
				]
				
				console.log('路由',allRouter)
				commit('SET_ROUTES', allRouter)
				commit('SET_Menu', allmenu)

				resolve(allRouter)

			})

		},
		//删除路由
		// 退出系统
		LogOut({ commit, state }) {
			commit('DEL_ROUTES')
		},
	}
})



function filterMenu(router) {
	let menuArr = [];
	//处理数据

	return menuArr;
}


function filterRouter(router) {

	let arr= [];
	//处理数据
	
	let obj = {
			path: item.path,
			name: item.name,
			meta: {
				title: item.title, //页面名
				icon: item.icon, //图标
				index: item.index,
			},
			component: (resolve) => require([`@/views/${item.component}`], resolve)
		};

	return arr;
}


export default store

注意：路由的component要使用 (resolve) => require([@/views/${item.component}], resolve)来引入