Vue自动化路由实现，如何改写为长尾？

本文共计1215个文字，预计阅读时间需要5分钟。

1. 需求描述：在编写Vue项目时，每当新增一个页面，通常都需要添加一个新路由。为此，我们会在项目中创建一个专门的文件来管理路由，如下所示。有没有一种方案，可以自动化这一过程？

1.需求描述

在写vue的项目中，一般情况下我们每添加一个新页面都得添加一个新路由。为此我们在项目中会专门的一个文件夹来管理路由，如下图所示

那么有没有一种方案，能够实现我们在文件夹中新建了一个vue文件，就自动帮我们添加路由。特别在我们的一个ERP后台项目中，我们几乎都是一个文件夹下有很多子文件，子文件中一般包含index.vue, detail.vue, edit.vue，分别对应的事列表页，详情页和编辑页。

上图是我们的文件目录，views文件夹中存放的是所有的页面，goodsPlanning是一级目录，onNewComplete和thirdGoods是二级目录，二级目录中存放的是具体的页面，indexComponents中存放的是index.vue的文件，editComponents也是同样的道理。index.vue对应的路由是/goodsPlanning/onNewComplete， edit.vue对应的路由是/goodsPlanning/onNewComplete/edit，detail.vue也是同样的道理。