vue路由、目录动态生成和分层管理

目录

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