情景：项目是用vue-element-admin框架搭建的，因为登录人有角色，要求根据不同的角色要有不同的菜单目录结构，大致思路如下：
1 因为一开始我安装的是基础版本的，但是这个动态路由需要用到集成版本中store/modules/permission.js 文件，用于状态管理。
2 路由中会区分两种：一种是没有权限都可以访问的页面比如登录页面、404页面、默认访问页面等；还有一种就是需要根据角色访问的动态路由了例如：

// 都可以访问的路由
export const constantRoutes = [
	{	
		path:'/404',
		component:() => import('@/views/404'),
		hidden:true
 	}
]
// 要根据角色才能访问的路由
export const asyncRoutes = [
{
	path:'/homePage1',
	component: Layout,
	redirect: '/homePage1/page1',
	// roles这个数组就是角色 他可以取多个值用逗号分开
    meta: { title: '主页1', icon: 'el-icon-s-help',roles:['admin] },
    children:[
    {
    	path: 'page1',
        name: 'Page1',
        component: () => import('@/views/page1'),
        meta: { title: '页1', icon: 'el-icon-s-open',roles:['admin'] }
    }
    ]
},{
	path:'/homePage2',
	component: Layout,
	redirect: '/homePage2/page2',
    meta: { title: '主页2', icon: 'el-icon-s-help',roles:['pm'] },
    children:[
    {
    	path: 'page2',
        name: 'Page2',
        component: () => import('@/views/page2'),
        meta: { title: '页2', icon: 'el-icon-s-open',roles:['pm'] }
    }
    ]
}
]

3 刚开始的初始页（可以在都可以访问的路由constantRoutes 中定义如path:’/’）要进行一个角色的判断，看他跳转到哪儿个路由例如：

<script>
	export default {
		created() {
		// 获取store 中存储的角色来判断路由的跳转
			const role = this.$store.state.user.role;
			if(role == 'admin') {
				this.$router.replace({path:'/homePage1'})		
			}else {
			   this.$router.replace({path:'/homePage2'})	
			}
		}
 	}
</script>

4 路由拦截，每次路由变化的时候都会经过一层拦截来确认他下一步的操作，文件是’@/permission.js’

const whiteList = ['/login']
router.beforeEach(async (to,from,next) => {
	// 获取跳转的目录的名称
	document.title = getPageTitle(to.meta.title)
	// 看有无token
	const hasToken = window.sessionStorage.getItem('token') ? true :false
	if(hasToken) {
		// 获取角色
		const hasRole = this.$store.state.permission.routes
		if(hasRole && hasRole .length > 0) {
			// 如果这个人有角色可以让他继续往下进行
			next()
		}else {
			try {
				const {userInfo} = await this.$store.dispatch('user/getInfo')
				// 根据角色去触发状态管理获取到这个角色下的路径
				accessRoutes = await this.$store.dispatch('permission/generateRoutes',[userInfo.role])
				// 然后把根据角色动态获取的路由合并到原来无角色也可以访问的路由上
				router.addRoutes(accessRoutes)
				// 然后继续往下执行，并替代当前的路径没有历史记录
                next({ ...to, replace: true })
			}catch(error) {
			   //  提示报错信息，去登录页面重新登录
				Message.error(error || 'Has Error')
                next('/login')
			}
		}
	}else {
	   // 如果没有token ，看看要访问的路径是否在白名单中，如果在可以继续访问否则跳到登录页重新登录
		if(whiteList.indexOf(to.path) !== -1) {
			next()
		}else {
			next('/login')
		}
	}
})

5 因为一开始我安装的是基础版本的，所以在左侧菜单的目录结构页面在’@/layout/components/Sidebar/index’ 需要做一下修改

现在目录的绘制要跟着这个动态的路由变化。

这是我总结的几点动态路由的修改，后续有发现会继续更新！