vue3动态添加路由及生成菜单,vue 自动生成路由
因为不同的用户有不同的权限，能访问的页面是不一样的，所以我们在写后台管理系统时就会遇过这样的需求：根据后台数据动态添加路由和菜单，这篇文章主要给大家介绍了关于某视频剪辑软件配置文件自动生成路由和菜单的相关资料，需要的朋友可以参考下
目录
写在前面router.json路由生成菜单生成效果总结
写在前面
每次重复写路由的时候是不是会觉得很烦，特别是项目大的时候，路由会有特别多，看都看不过来，所以这里我是有了一个router.json的配置文件来对路由做一些简单的配置，然后让路由和左侧菜单栏可以同时生成。
router.json
主要配置项如下：
{
名称:路由器配置，
菜单:[{
id: 1 ，//路由id，不能重复
名称： home ，//路由名字
路径：/homePage ，//路由路径
标签: 首页,//菜单标题
selected: true，//默认选中
icon: el-icon-monitor ，//菜单显示图标
open: true，//默认打开
组件： homePage/homePage.vue ，//组件路由
儿童:[ //子菜单
{
id: 3 ，
名称:获取封面，
路径"://获取封面"，
标签: 封面截取，
selected: false，
图标：埃尔-图标-剪刀，
open: false，
组件： getCover/getCover.vue ，
儿童:[]人
}
]
},{
id: 2 ，
名称:测试页，
路径":/testPage "，
标签: 测试，
selected: false，
icon: el-icon-setting ，
open: false，
组件:测试/测试。vue ，
儿童:[]人
},{
id: 5 ，
名称:测试菜单，
路径：/testMenu ，
标签: 菜单测试，
selected: false，
icon: el-icon-setting ，
open: false，
组件： testMenu/testMenu.vue ，
儿童:[]人
}]
}
配置主要分为两部分，一部分由于菜单生成，一部分用于路由生成，当然两者也有共用的部分
路由生成
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
从"元素-ui/src/locale/lang/ro "导入ro；
Vue.use(VueRouter)
//引入配置文件router.json
let router menu=require( @/config/router。JSON’)；
路由器菜单=路由器菜单。菜单；
let menu=[]；
//配置路由
let format route=function(路由器菜单，菜单){
对于(设I=0；我routerMenu.lengthi ){
let temp={
路径：routerMenu[i].路径，
名称：routerMenu[i].姓名，
//这块要注意
//用需要这种方式引入的时候，会将你的成分分别打包成不同
//的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载
//这个射流研究…
component:resolve=require([`@/views/$ {路由器菜单[I].组件}`],解析)
};
菜单。推(temp)；
if(routerMenu[i].儿童routerMenu[I]。孩子。长度0){
//递归生成子菜单的路由
formatRoute(routerMenu[i].儿童，菜单);
}
}
}
//初始化
formatRoute(routerMenu，菜单);
//重定向设置
常量路由=[
{
路径："/",
重定向："/主页"
},
]
//将生成的路由文件推进去
对于(设I=0；一.菜单长度我)
路由.推送(菜单【我】)；
const router=new VueRouter({
路线
})
导出默认路由器
菜单生成
模板
div id=leftMenu
/div
/模板
脚本
导出默认值{
姓名：左，
data(){
返回{
菜单：[]
}
},
方法：{
//通过路由编号来找节点
findNodeById(节点，id){
对于(设I=0；我节点。长度；i ){
if(id==node[i].id){
节点[我].选定=真
如果(节点【我】。子节点[i].children.length 0){
this.findNodeById(node[i]).孩子，id)；
}
节点[我].打开=!节点[我].开放；
如果（这个. route.path！==节点[我].路径)这个router.push(node[i]).路径);
}否则{
节点[我].选定=假
如果(节点【我】。子节点[i].children.length 0){
this.findNodeById(node[i]).孩子，id)；
}否则{
}
}
}
},
//选中菜单节点
选择节点(id){
this.findNodeById(this.menu，id)；
设DOM树=this。发电机菜单(这个。菜单， 0)
让左侧菜单=文档。getelementbyid(“左菜单”)；
左侧菜单。innerhtml=DOM树；
},
//动态生成菜单目录
发电机菜单（菜单、温度、楼层){
对于(设I=0；i menu.lengthi ){
temp= div style= width:max-content
div class= menu option o n click= choose node($ { menu[I].id})
style= text-indent:$ { floor } em；
背景色：${menu[i].入选？海蓝宝石: };
光标：指针；
边距-顶部：0.3雷姆；
I= $ { menu[I]。icon}/i
$ {菜单[我].标签} `
如果(!菜单[我].打开菜单[我].子菜单[i].children.length 0){
temp= I style= margin-left:1 rem class= El-icon-向下箭头/I
}否则{
如果（菜单[我].打开菜单[我].子菜单[i].children.length 0){
temp= I style= margin-left:1 rem class= El-icon-arrow-up /I
}
}
temp=`/div
如果（菜单[我].打开菜单[我].儿童菜单【我】。儿童。长度！=0){
temp=这个。发电机菜单(菜单[I]).儿童，临时，楼层1);
}
temp=`/div
}
返回温度；
}
},
已创建(){
},
已安装(){
窗户。选择node=this。选择节点；
let menu=[]；
//获取路由菜单配置文件
const router=require( @/config/router。JSON’)；
菜单=路由器.菜单
this.menu=菜单
设DOM树=this。生成器菜单(菜单，，0)
让左侧菜单=文档。getelementbyid(“左菜单”)；
左侧菜单。innerhtml=DOM树；
}
}
/脚本
样式范围
#leftMenu{
最小高度：calc(100 VH-44px-1 rem)；
背景色：矢车菊蓝色；
文本对齐：左对齐；
填充：0.5雷姆1雷姆
字号：大；
字体粗细：粗体；
}。选择edM{
背景色：海蓝宝石；
}。菜单选项{
光标：指针；
}
/风格
效果
左侧菜单便是自动生成的，点击菜单栏也会跳转到对应的路由地址，当然，样式有点丑，但样式的话可以自己后续再调整。
这样的话，我们新加菜单的时候只需要在配置文件中配置好，就可以直接写编写页面，这样也给我们省下了很多时间。
总结
到此这篇关于某视频剪辑软件配置文件自动生成路由和菜单的文章就介绍到这了，更多相关某视频剪辑软件自动生成路由和菜单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。