Vue+Router自动生成路由方法

使用require.context() 自动生成路由

1、现实开发中增加一个新的页面可能就要重新编写路由的问题，导致路由文件每次都要重新被修正。比如：

文件较多，修改起来较为复杂。

2、解决办法：

实际项目开发中，一般都是在每一个页面模块中定义属于自己的路由文件，在总的index入口将文件进行合并，从而组成新的路由。（个人经历的开发项目是这么解决的，有更好的可以住家评论借鉴学习，多谢）

3、借鉴批量引入文件方法：

webpack官网中有这么一句话的介绍：

上面是我直接从官网搬过来的截图，如果需要更加详细的官方demo，可以点击我下面放置的链接：

webpack 官方中文文档webpack.docschina.org

4、项目结构

开发项目所有需要跳转的页面设计到一个打目录位置中，其余所需组件放置到其他文件中，不需要展示的页面组件影响路由生成的效果，比如：

然后使用正则获取文件，拿到路径以及文件的名字进行封装之后和routes属性赋值对应即可，再比如这段代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let routerArr = []
const contexts = require.context('../pages', true, /\.vue$/)
contexts.keys().forEach(value => {
  const path = value.substr(value.indexOf('/'), value.lastIndexOf('.') - 1)
  const componentLocation = value.substr(value.indexOf('.') + 1, value.lastIndexOf('.') - 1)
  const componentName = componentLocation.substr(componentLocation.lastIndexOf('/') + 1)
  routerArr.push({
    path: path,
    name: componentName,
    component: () => import(/* webpackChunkName: "alarm" */ `../pages${componentLocation}`)
  })
})

export default new Router({
  mode: 'hash',
  routes: routerArr
})

截图展示我最终可以拿到的路由格式为：

5、总结

从上面的介绍中可以看出生成的效果单层路由方式的，格式可以理解为：

页面一： /a

页面二： /a/b

.......

我这里面没有写包含自路由的封装格式，但是我没写不代表不可以做，思想都是一样的，但是需要特殊判断文件夹的位置信息，vue文件的位置信息，然后封装父子路由格式等。

还有诸如路由元数据填充等动态信息，同样可以在循环keys数据封装路由信息过程中调用静态属性，或者是定义外部配置文件进行操作。不管怎么说，都是为了防止在反反复复增加页面操作需要路由定向时反反复复。

虽然每次追加新定向路由代码时间不长，但是精简文件性质的偷懒不仅仅是节省开发时间，定向路由自动生成更是对文件夹以及文件位置归档的一种规范。（好吧，如果大家要是有不同意见，麻烦留情不要把我喷死）。

就如上面说的那样，最近有时间会追加父子路由的方式。

特殊声明：以上仅代表个人意见，不喜勿喷，觉得好记得点赞关注！

Vue+Router自动生成路由方法

猜你喜欢