Vue3.0动态路由及生成菜单

前面讲了Vue2项目中动态添加路由及生成菜单，今天尝试在Vue3中动态添加路由及生成菜单。

最近在尝试用Vue3开发个管理平台项目，一切都是从头开始，基本框架搭建，熟悉Vue3写法，编写登录页，编写路由守卫，上面功能已基本完成，开始编写首页布局，用Vue3就必须用Router4.x版本，所以之前的代码迁移过来之后发现，动态路由不生效，查了很多资料，最后发现，Router4中，去掉了 router.addRoutes ，只能使用 addRoute

所以之前的写法就要相应的调整，之前是可以动态添加更多的路由规则，参数必须是一个符合 routes 选项要求的数组。

router.addRoutes(routes:Array<RouteConfig>);

现在是只能添加一个

router.addRoute("名称",{
  path:`/index`,
  name:'首页',
  component:()=>import(`@/index.vue`)
});

接下来就详细说明

1 路由数据封装

前台把路由写在代码里，这种方式只适用部分情况，所以大部分情况是路由后台提供，比如返回格式如下：

{
"code":0,
"msg":"success",
"data":[{
"id":1000,
"parentId":-1,
"icon":"iconquanxian",
"name":"组织架构",
"path":"/system",
"component":"Layout",
"redirect":null,
"type":"0",
"children":[{
"id":1100,
"parentId":1000,
"children":[],
"icon":"iconyonghuguanli",
"name":"用户管理",
"path":"/user",
"component":"views/system/user/index",
"redirect":null,
"type":"0",
}],
},{
"id":2000,
"parentId":-1,
"icon":"iconquanxian",
"name":"权限管理",
"path":"/organization",
"component":"Layout",
"redirect":null,
"type":"0",
"children":[{
"id":2100,
"parentId":2000,
"children":[],
"icon":"iconyonghuguanli",
"name":"菜单管理",
"path":"/menu",
"component":"views/system/user/index",
"redirect":null,
"type":"0",
}],
}]
}

这种是后台树型结构返回，前台不需要进行二次处理可以直接显示成菜单，

<a-menu
theme="dark"
mode="inline"
>
<a-sub-menuv-for="subitem in menuData.menu" :key="subitem.path">
<template #title>
<Icon-font :type="subitem.icon"/>
<span>{{ subitem.name }}</span>
</template>
<a-menu-itemv-for="item in subitem.children" :key="item.path">{{
      item.name
    }}</a-menu-item>
</a-sub-menu>
</a-menu>

但是路由需要重新封装，先说说用到的字段，path-路由地址、component这个现在有两种，一种是Layout代表父菜单，另一种views开头的是组件地址。那么我们就可以开始动态生成路由了，写法和Vue2项目有所不同，首先定义一个方法，

const routerPackag = routers =>{
  routers.filter(itemRouter =>{
if(itemRouter.component !="Layout"){
      router.addRoute("BasicLayout",{
        path:`${itemRouter.path}`,
        name: itemRouter.name,
        component:()=>import(`@/${itemRouter.component}`)
});
}
// 是否存在子集
if(itemRouter.children && itemRouter.children.length){
      routerPackag(itemRouter.children);
}
returntrue;
});
};

2 调用

上面这个方式是动态生成路由，接下来就是调用这个方法。

getBasisMenu().then(res =>{
if(res.code ==0){
    routerPackag(res.data);
}
});

3 效果

动态路由实现了，但是现在还有部分问题未解决

代码在gitee上，可以直接运行。

以上是 Vue3.0动态路由及生成菜单 的全部内容， 来源链接： utcz.com/a/124927.html

回到顶部