目录

vue前端路由

为什么要动态生成路由？

批量设置routes的痛点

痛点一：path结构问题

痛点二：name、path重复问题

痛点三：生成目录的层级实现问题

痛点四：生成目录的语义问题

痛点五：动态生成的参数继承问题

解决方案

路由、目录动态生成效果实现

源码和预览

---

vue前端路由

        vue前端路由可区分和管理不同的页面，并且给页面中的router-link标签提供跳转所需的path等参数，是前端页面切换的主要途径之一。

        vue路由有个重要的常数routes，是创建路由必须的参数对象。routes默认每一个路由都有对应的name、path、component基本属性。

为什么要动态生成路由？

        一般情况下，通过设置routes参数，可以实现路由的名称、路径和对应的组件管理，也可以通过对path属性设置参数，或使用正则表达式来实现动态路由管理。

        但是在使用routes管理大批量，层级较多，结构较复杂，极有可能包含重复名称或重复路径的路由时，不方便手动设置、实现起来容易出错。即使用插件解决了批量引入的问题，面对众多的层级和名称，手动写入每层路由的name和path是不现实的，还有meta等参数需要分层管理。比如：

场景：用路由管理大批、层级结构复杂的前端路由，就像很厚的书本目录一样，并且要求生成对应的目录，让目录分层显示并且产生相应的连接。

批量设置routes的痛点

痛点一：path结构问题

• 由于层级结构复杂，根据原始层级设置path，url可能会超长，截取长度又容易产生重复
• 此外，url是网站的别名，复杂的url不利于传播和辨识，调试的时候也不太方便
• 所以path结构需要扁平化，而不是逐层递增

痛点二：name、path重复问题

• 大量路由的name、path一旦发生重复，手动排查不方便
• 需要中间函数处理源数据中的重复，然后动态生成routes

痛点三：生成目录的层级实现问题

• 动态生成目录包括两种不同的数据，一种是不含component的纯“层级”，一种是包含component和其他routes属性的“路由”
• 在routes中每个路由都必须设置component，结构上与目录是有区分的
• 所以，在痛点二中提到的动态routes生成的同时，还需生成一个便于查询的可枚举对象，比如一个map，来记录目录生成所需的信息

痛点四：生成目录的语义问题

• 根据痛点三中提到的map，动态生成目录。该目录需要显示文本，来区分不同层级和连接
• 很显然这些文本也是动态生成的，为了方便，可以默认使用map中不重复的属性生成，例如map中的name(继承自源数据，同时也是routes的name)
• 但是，当name不具备语义或者name的语义与目录中的文本语义不同时，如何处理？这就需要在生成map的集中管理常数中，设置指定可选属性，来表示不使用默认的name生成，而是用该指定属性的值生成目录文本

痛点五：动态生成的参数继承问题

• 为解决痛点一，routes生成时采用扁平的path结构，不是按照原始父子顺序排列，继承顺序被打乱。如何解决例如meta等附加属性的参数继承问题？
• 可以在集中管理路由和目录的常数中，用“层级”管理属性继承，需指定继承规则。然后在中间函数里，按指定的规则处理数据，并将继承的属性写入生成的routes、map。

        关于规则的设定，可参考此文章底部实现源码中的几个文件及注释：

• src\router\routerScript\routerMenus.js的注释
• src\router\routerScript\文件夹下：routerMaker.js、routerMeta.js、routerQuery.js文件，这几个文件是动态生成routes的中间函数，根据实际使用调整

解决方案

解决方案的步骤如下：

1. 设定一个常数来集中管理参数，该常数包含纯层级和路由；
2. 使用一套中间处理函数，来动态生成routes，和带有纯层级的map，这个map可以用于生成目录；
3. 在.vue文件中，通过v-if、v-for循环遍历生成的map，来动态生成标签。并且通过methods中的函数，将子层写入父层，从而完成层级嵌套。生成的层级嵌套标签，样式不是固定的，可以根据需求调整css和响应的函数。

路由、目录动态生成效果实现

        路由按照层级批量生成，并且按照源数据的父子层级嵌套，层级可展开/关闭，初始状态可以设置展开哪些层级，下图中展示了目录的关闭/展开效果： 

 

        如果你使用UI框架，并且UI框架具备绑定参数动态生成菜单的功能，请自行将map转换为所需的数据格式，从而更方便地生成视图元素。

源码和预览

代码已经整合到我的微型项目合集里，预览或下载源码可使用以下链接： 
前端路由、目录动态生成和分层管理实现https://an-ant-watcher.gitee.io/componentsDIY/home?vNum=1.5.3.1653030441931_beta
在线预览用的是免费的gitee-pages，可能需要加载一会儿，或尝试手动刷新。

我的微型项目合集源码下载https://gitee.com/an-ant-watcher/componentsDIY.git

如有疑问或建议，请在博客下方发表留言。