文章列表:
实现方案:
方案一、使用VueRouter的动态路由,遍历路由信息动态构建菜单。
优势:熟悉Vue路由的情况下,这种方式可能构建起来会省部分代码。
劣势:路由信息不可见,对于刚接手的开发者没有后端服务的情况下,无法摸索精确找url对应的页面,构建多级菜单时需要增加一个空页面作为子路由的载体,页面结构变复杂。
根据后端构建动态路由有点难度,如构建 children: [{ path: '', component: () => import('pages/IndexPage.vue') }]
类似这样的代码。
方案二、单独构建菜单树,使用单独的一个菜单树结构来构建菜单。
单独构建菜单树,使用单独的一个菜单树结构来构建菜单,使用url或者name来匹配对应的路由信息。
优势:原始路由清晰,易于调试,多级菜单不需要空页面作为路由载体,等等
劣势:维护菜单树和路由树的对应关系时代码可能有点复杂,
这里笔者是用的第二种方式。
思路分析
第一,我们需要构建一个菜单树,怎么构建树呢,我们需要子节点包含父节点信息的平级结构,然后把它转成树结构,只有子节点包含父节点的信息我们才能构建树结构,
上面这样的平级数据组成树结构应该是这样的
了解菜单数据的组成过后,开始编写处理菜单树的代码
在stores
文件夹下新建layout-store.ts
文件,编写如下代码,需要熟悉pinia
,
定义菜单类型,在src
下新建types
目录,之后新建base.d.ts
文件,编写如下代码
在router文件夹下新建my-router.ts
文件,编写如下内容,此文件内容就是一会需要展示的菜单原始数据。
修改layout-store.ts
文件,编写平级菜单结构转树结构的方法
编写过后完整代码如下,
这里菜单数据的代码就写好了,接下来编写页面展示。
在layouts
文件夹下新建目录comp
,在comp
目录新建文件LeftDrawer.vue
作为左边侧边栏内容组件,
LeftDrawer.vue
组件代码如下
在MainLayout.vue
文件中引入LeftDrawer.vue
组件,并替换q-drawer
的标签中的q-list
标签,然后精简代码,编辑过后MainLayout.vue
代码如下所示
运行项目,如下图所示
说明组件引入成功,然后在comp
文件夹下新建MenuItem.vue
文件,编写如下内容代码,此代码有点复杂,用到了q-list
,q-expansion-item
组件,如果不熟悉组件使用方法,可查看官方文档学习使用
MenuItem.vue
代码如下,我尽可能的多写注释,便于理解,如果没看懂,可以把代码拉到本地自己琢磨琢磨。
编写完成过后,修改LeftDrawer.vue
文件,要在此文件中引入MenuItem.vue
组件,代码如下
这个时候不出意外的话,LeftDrawer.vue
内代码会有报错,提示没有mainPage
属性,我们给它加上即可,修改layout-store.ts
内代码,在LayoutType
中加入代码 mainPage: WJ.MenuItem
,加入过后,如下
加入过后,代码提示报错,这时候我们再编写代码在state
中添加mainPage
属性,修改过后完整代码如下
重启项目,可以看到,我们编写的动态菜单已经加载出来了,
至此我们的动态菜单的展示已经编写完成,不过点击你会发现会跳转到404页面,因为我们并没有编写对应的路由配置,接下来我们将优化这个动态菜单功能,如,菜单高亮,支持外部链接,支持内部打开外部链接等等……..
动态菜单到此编写完成。
下一篇教程地址
从0到一个前端后台管理框架(四)
封