后台获取路由参数 拼接动态路由

动态路由

根据登录的角色不同将后端返回的路由参数添加进路由中
这是测试代码 meta里也可以写icon等

剩下的正常写

首先 var 一个变量
然后进行路由拦截

router.beforeEach((to, from, next) => {
	if (!getRouter) {//不加这个判断，路由会陷入死循环
		if (!getObjArr('router')) {
			getRouter = testRouter//后台拿到路由
			saveObjArr('router', getRouter) //存储路由到localStorage

			routerGo(to, next)//执行路由跳转方法

		} else {//从localStorage拿到了路由
			getRouter = getObjArr('router')//拿到路由
			routerGo(to, next)
		}
	} else if (to.matched.length == 0) {
		next("/404")
	} else {
		next()
	}
});

在获取后测试的那些路由进行添加

function routerGo(to, next) {
	getRouter = filterAsyncRouter(getRouter) //过滤路由
	router.addRoutes(getRouter)
	 //动态添加路由  VUE3.X 来用addRoute()且可以用于添加进某子路由里 但path要加上父path 
	 //比如：“/index/Home_page”
	next({ ...to, replace: true })  //一定要写成{ ...to, replace: true } 否则进去将白屏
}

最关键的了

进行路由上的拼接

function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串，转换为组件对象
	let accessedRouters = [];
	asyncRouterMap.forEach((item, index) => {
		accessedRouters.push({
			path: item.path,
			name: item.name,
			redirect: item.redirect,
			meta: { title: item.meta.title },
			component: () => import('../views/' + item.component),
		})
		if (item.children && item.children.length) {
			accessedRouters[index].children = filterAsyncRouter(item.children) 
			//这里如果有子路由的话进行递归来拼接子路由
		}
		return true
	})
	return accessedRouters
}

saveObjArr()储存在本地

function saveObjArr(name, data) { /
	localStorage.setItem(name, JSON.stringify(data))
}

从本地获取

function getObjArr(name) { //localStorage 获取数组对象的方法
	if (!localStorage.getItem(name)) {
		return localStorage.getItem(name)
	} else {
		return JSON.parse(localStorage.getItem(name));
	}

}

这些就是我用于动态路由的写法，之前也有看过其他，但多是配合layout比较复杂。我直接进行的数据的拼接。
至于addRoutes()和addRoute()两者添加路由的方法 使用第一种将会报警告 说已经停用了 但是VUE2.X没事 3.X不行 且addRoutes不可以网静态路由子路由添加 只能用addRoute() 且动态路由向静态子路由添加path要加上父路由的path
router.addRoutes(getRouter)
addRoute(‘404’,getRouter) 向404的子路由添加