vue动态路由 this.$router.addRoutes
1.Ajax取到数据,对数据加工,然后动态添加到router里created() {let routerChildrenList = setAsyncRouters();this.leftMenu = elMenuData;routerChildrenList.then((res) => {res.unshift({path: "/page0",name: "page0",
·
1.Ajax取到数据,对数据加工,然后动态添加到router里
created() {
let routerChildrenList = setAsyncRouters();
this.leftMenu = elMenuData;
routerChildrenList
.then((res) => {
res.unshift({
path: "/page0",
name: "page0",
component: () => import("@/views/pages/page0.vue"),
});
let routerItem = {
path: "/index",
name: "index",
component: () => import("@/views/index/index.vue"),
children: res,
redirect: res[0].name,
};
let routerList = [routerItem];
this.$router.addRoutes(routerList);
})
.catch((err) => {
console.log(err);
});
}
加工函数
import asyncRouters from './asyncRouter'
const asyncRoutes = []
for(let i=1;i<=10;i++){
let routeItem = {
path : '/page'+i,
name : 'page'+i,
component : ()=>import(`@/views/pages/page${i}.vue`)
}
asyncRoutes.push(routeItem)
}
function getAsyncRouters(){
return new Promise((resolve)=>{ // 模拟ajax获取el-menu的数据
setTimeout(() => {
resolve(asyncRouters)
}, 500);
})
}
function buildRoute(routerList){
let childList = [];
function createChildRouter(list){
if(!list) return;
for(let i=0;i<list.length;i++){
if(list[i]){
let name = list[i].name;
let routeItem = asyncRoutes.find(item=>item.name===name)
if(routeItem){ // 有路由
childList.push(routeItem)
if(list[i].children.length!==0){
createChildRouter(list[i].children)
}
}
}
}
}
createChildRouter(routerList)
return childList
}
export async function setAsyncRouters(){
let routers = await getAsyncRouters();
let children = buildRoute(routers)
return children
}```
模拟数据
```javascript
export default [
{
name : 'page1',
path : '/page1',
children : [
{
path : '/page4',
name : 'page4',
children : []
},
{
path : '/page5',
name : 'page5',
children : [
{
path : '/page6',
name : 'page6',
children : []
},
{
path : '/page7',
name : 'page7',
children : []
}
]
},
{
path : '/page8',
name : 'page8',
children : []
}
]
},
{
name : 'page2',
path : '/page2',
children : []
},
{
name : 'page3',
path : '/page3',
children : [
{
path : '/page9',
name : 'page9',
children : []
},
{
path : '/page10',
name : 'page10',
children : []
}
]
}
]
效果
更多推荐
已为社区贡献3条内容
所有评论(0)