vue 动态菜单和路由,vue3前端动态路由
通常我们在vue项目中配置前端路由，但是在某些项目中可能会遇到权限控制，以至于参与到动态路由的设置中。本文主要介绍如何使用Vue3管理系统实现动态路由和动态侧菜单栏。有需要的可以参考一下。
目录
动态路由动态侧菜单栏的前言摘要
前言
在做Vue管理系统的时候，我们会满足一个要求：每个用户的权限不一样，所以他能访问的页面(路由)和他能操作的菜单选项也不一样。如果是后端控制，我们需要动态路由前端，动态渲染侧面菜单栏。
动态路由
在这个示例管理系统中，由于每个用户的权限不同，可访问的路由页面也不同，所以用户可访问的路由页面都是由后端根据权限动态配置的。我们前端需要根据后端接口返回的路由表动态添加和删除路由，从而生成该用户拥有的路由。重点：实现动态路由api
Router.addRoute() //在应用已经运行时添加router . remove route()//在应用已经运行时删除route定义共用的页面路由(无论哪个用户都会有的)。
例如，任何用户都可以访问登录页面login，错误页面404。
从“vue-router”导入{ createRouter，createWebHashHistory }
const publicRoutes=[
{
路径：“/”，
重定向：{路径：/登录 }
},
{
路径：“/login”，
名称：登录，
组件：()=导入(./视图/登录’)
},
{
路径：“/404”，
名称： 404 ，
组件：()=导入(./views/404’)
},
{
路径：“/home”，
姓名：家，
组件：()=导入(./views/home’)，
重定向：“/欢迎”，
儿童：[
{
路径：“/:pathMatch(。*)*，//捕获所有路由或404未找到的路由
组件：()=导入(./views/welcome’)
}
]
}
]
const router=createRouter({
history: createWebHashHistory()，
路线：公共路线
})
导出默认路由器
接口数据：这里模拟接口的路由数据(这里进行数据精简，便于演示，实际情况可能要进行数据结构格式的转换)
导航列表：[
{
id: 1，
图标：图标-侏罗纪_用户，
名称：“用户管理”，
URL:“/用户”
},
{
id: 2，
图标：图标-侏罗纪_用户，
名称：“角色管理”，
URL:“/角色”
},
{
id: 3，
图标：“图标-shebei”，
名称：“设备管理”，
URL:“/设备”
}
]
添加动态路由进去的时机(router.beforeEach)
使用全局前置保护路由器。beforeEach在跳转路由之前，判断是否添加了动态路由，如果没有，则先获取数据添加路由。(router.beforeEach还会做登录等拦截，此处省略)
从“@/store”导入商店
//这里我用vuex的一个变量asyncRoutestMark来标识路由是否已经拼接。
router.beforeEach((收件人，发件人，下一个)={
如果(！store.state.asyncRoutestMark) {
//navigationList是上面模拟接口返回的数据。
//这里所有新路由都作为home的子路由(实际发展视情况而定)
//meta是存储一些信息，可以用于权限检查或者其他。
navigation list . foreach(navigation={
router.addRoute(home ，{
路径：navigation.url，
meta: { name: navigation.name，isAsync: true，icon: navigation.icon }，
名称：menu.url，
组件：()=导入(` 0./views/${menu.url} `)
})
})
Console.log(router.getRoutes()，查看现有路由)
store . commit( setasyncroutestmark ，true)//添加路由后将ID更改为true
下一个({.to，replace: true }) //用于重定向和释放的路由
}否则{
下一个()
}
})
使用router.getRoutes()方法查看现有路由，我们将看到它们是根据新路由添加的。
这样，我们就实现了动态路由！
动态侧边菜单栏
这就是我们想要达到的效果。根据界面数据可以动态渲染，无论一级菜单，二级菜单，三级甚至更多级(但一般最多只能到三级哈哈)。很多组件库都可以实现这个功能。这里我们就用Vue组件库的Ant Design的嵌入式菜单组件(如下图)来实现。有父菜单和子菜单。父菜单由子菜单包装，子菜单直接与菜单项一起使用。你可以去文档里看看组件的用法。
接口数据：这里模拟接口的菜单数据(实际情况可能要进行数据结构格式的转换)
菜单列表：[
{
url: ，
名称：人事管理，
图标：“图标-人缘”，
menuId: 1，
儿童：[
{
URL:“/用户”，
名称：“用户管理”，
图标：图标-侏罗纪_用户，
menuId: 1001，
儿童：[]
},
{
URL:“/角色”，
名称：“角色管理”，
图标：“图标-焦色”，
menuId: 1002，
儿童：[]
}
]
},
{
URL:“/设备”，
名称：“设备管理”，
图标：“图标-shebei”，
menuId: 2
}
]
重点：组件递归
使用v-for循环菜单数据数组来渲染vue的组件库和设计的菜单组件，有两种情况。
如果有子菜单，那么渲染一个-子菜单(父菜单)，包装自己的组件，将子数据传递给调用组件本身，即递归调用组件本身，那么调用组件本身将重复上述逻辑判断，直到没有子菜单，即满足第二种情况，递归调用结束。如果没有子菜单，菜单组件将直接显示在a菜单项下，组件名为MenuList。递归调用时，要根据不同的数据，用组件名来渲染菜单。
没有图标版本
模板
模板v-for= menuList中的菜单:key=menu.menuId
子菜单v-if= menu . children menu . children . length :key= menu . menuid
模板#title{{ menu.name }}/template
menu list:menu list= menu . children /
/a-子菜单
菜单项：key=menu.menuId v-else
span{{ menu.name }}/span
/a-菜单项
/模板
/模板
脚本设置
从“vue”导入{ defineProps }
defineProps({
菜单列表：{
类型：数组，
默认值：()=[]
}
})
/脚本
效果如下
有图标版本
根据界面数据的图标匹配图标。方法有很多，比如用iconFont，svg，png，主要是为了对应图标的名字。这里，使用由组件库提供的图标的iconFont方法。
模板
模板v-for= menuList中的菜单:key=menu.menuId
子菜单v-if= menu . children menu . children . length :key= menu . menuid
模板#图标
icon-font :type=menu.icon /
/模板
模板#title{{ menu.name }}/template
menu list:menu list= menu . children /
/a-子菜单
菜单项：key=menu.menuId v-else
模板#图标
icon-font :type=menu.icon /
/模板
span{{ menu.name }}/span
/a-菜单项
/模板
/模板
脚本设置
从“vue”导入{ defineProps }
从“@ant-design/icons-vue”导入{ createFromIconfontCN }
const icon font=createFromIconfontCN({
script URL:“//at . alicdn . com/t/font _ 2572336 _ 4hg 62 uu 7 hxd . js”
})
defineProps({
菜单列表：{
类型：数组，
默认值：()=[]
}
})
/脚本
效果如下：
所以我们实现了动态侧菜单栏！
总结
关于如何使用Vue3管理系统实现动态路由和动态侧菜单栏的文章到此结束。有关Vue3动态路由和动态侧菜单栏的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。