目的:根据路由生成动态菜单
1.将路由存至pinia仓库,将动态菜单封装成组件
新建router.ts文件,对外暴露配置路由
原来的index.ts路由可以引入
在pinia的user仓库引入路由 user.ts
ts类型可以用vue-router自带的RouteRecordRaw类型 type.ts里
引入ts类型 user.ts
将动态路由菜单封装成组件 index.vue
2.在封装的组件里,引入数据
从父组件里将数据传到组件里
父组件:
子组件:
为何不在组件内部引入数据:
因为Vue的设计理念是组件化和响应式,这决定了组件内部不应该直接引入数据,而是应该通过props、data等机制来管理数据。这样的设计使得Vue的应用更加清晰、易于维护和扩展。
通过将数据传递给组件,我们可以更容易地管理和维护这些数据。此外,这也使得我们的组件更加具有复用性,因为我们可以在不同的地方重用同一个组件,而不需要担心数据不一致的问题。
总的来说,组件在外部传递数据是一种常见的编程实践,它可以帮助我们更好地组织和管理我们的代码,同时也能提高代码的可维护性和复用性。
3.根据路由生成动态菜单
分析:根据路由生成动态菜单分为几类
1.没有子路由的
2.有子路由但是只有一个子路由的(例如数据大屏)
3.有子路由且个数大于一个
(1)没有子路由![](https://i-blog.csdnimg.cn/blog_migrate/59743db76c0d47b3f2345f9f3478d820.png)
#title是因为
item.meta.title是元信息,用于展示菜单文字的
<span>标 </span>是预留的图标位置
(2)有子路由但是只有一个子路由的
(3).有子路由且个数大于一个
el-sub-menu是可折叠的菜单
结果:
再次分析:
可以看出,有些路由不应该出现在用户面前的却出现了。
可以在meta里附加这个路由该不该被隐藏
但是这样子,假如有三级路由,四级路由,还是显示不出来,所以要用递归组件,当然递归组件只能运用到第三类有子路由且个数大于一个的组件里。
数据到这剩下都是二个子路由以上的,子路由们就进入了组件里,再次进行1-3的操作,
当然,递归自己,就要去给自己一个名字,不然没有用。
递归组件根据路由生成动态菜单的主要好处是可以提高开发的效率,降低维护的成本,提升用户体验,并且可以更好地实现权限控制。