一、router.addRoute（）添加单个路由
（1）router.addRoute 可以动态添加一条新路由。若该路由有 name，并且已经存在一个与之相同的名字，则会覆盖它。
router.addRoute(route: RouteConfig): () => void
比如添加用户页面的路由：
router.addRoute({
name: 'user',
path: '/system/user',
meta: {
title: '用户管理'
},
component: () => import('@/views/User.vue')//路由按需加载
},)
（2）router.addRoute 还可以为现有路由添加子路由。
router.addRoute(parentName: string, route: RouteConfig): () => void
例如，为home页面添加菜单子路由：
router.addRoute('home',
{
name: 'menu',
path: '/system/menu',
meta: {
title: '菜单管理'
},
component: () => import('@/views/Menu.vue')//路由按需加载
},
)
二、router.addRoute（）添加多个路由
当有多个路由时，也可以用router.addRoute（）来添加：
//router.js
generateRoute(menuList) {
//获取菜单权限中每个菜单的路由，包括半选和全选状态的权限
let routes = []
const deepList = (list) => {
while (list.length) {
let item = list.pop()
if (item.action) {//二级菜单
routes.push({
name: item.component,
path: item.path,
meta: {
title: item.menuName
},
component: item.component
})
}
if (item.children && !item.action) {//一级菜单
deepList(item.children)
}
}
}
deepList(menuList)
return routes;
}
async function loadAsyncRoutes() {
//从localStorage里获取存储的用户信息
let userInfo = storage.getItem('userInfo') || {}
if (userInfo.token) {
try {
//获取菜单权限列表
const { menuList } = await this.$api.getPermissionList()
//获取所有新增路由对象数组
let routes = this.generateRoute(menuList)
//遍历每一个要渲染的路由
routes.map(route => {
let url = `./../views/${route.component}.vue`
route.component = () => import(url);
//每一个路由都添加进去
router.addRoute("home", route);
})
} catch (error) {
}
}
}
loadAsyncRoutes();
同时在Login页面中也要添加以上代码：
Login.vue
......
<script>
export default {
name: "login",
data() {
return {...}
},
methods: {
login() {
this.$refs.userForm.validate((valid) => {
if (valid) {
this.$api.login(this.user).then(async (res) => {
this.$store.commit("saveUserInfo", res);
***await this.loadAsyncRoutes();***
this.$router.push("/welcome");
});
} else {
return false;
}
});
},
***async loadAsyncRoutes() {
let userInfo = storage.getItem("userInfo") || {};
if (userInfo.token) {
try {
const { menuList } = await this.$api.getPermissionList();
let routes = utils.generateRoute(menuList);
routes.map((route) => {
let url = `./../views/${route.component}.vue`;
route.component = () => import(url);
this.router.addRoute("home", route);
});
} catch (error) {}
}
}***
}
};
</script>
