vue3之递归组件根据路由生成动态菜单

目的：根据路由生成动态菜单

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）没有子路由

#title是因为

item.meta.title是元信息,用于展示菜单文字的

<span>标&nbsp;</span>是预留的图标位置

（2）有子路由但是只有一个子路由的

（3）.有子路由且个数大于一个

el-sub-menu是可折叠的菜单

结果：

再次分析：

可以看出，有些路由不应该出现在用户面前的却出现了。

可以在meta里附加这个路由该不该被隐藏

但是这样子，假如有三级路由，四级路由，还是显示不出来，所以要用递归组件，当然递归组件只能运用到第三类有子路由且个数大于一个的组件里。

数据到这剩下都是二个子路由以上的，子路由们就进入了组件里，再次进行1-3的操作，

当然，递归自己，就要去给自己一个名字，不然没有用。

递归组件根据路由生成动态菜单的主要好处是可以提高开发的效率，降低维护的成本，提升用户体验，并且可以更好地实现权限控制。