使用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数据封装路由信息过程中调用静态属性,或者是定义外部配置文件进行操作。不管怎么说,都是为了防止在反反复复增加页面操作需要路由定向时反反复复。
虽然每次追加新定向路由代码时间不长,但是精简文件性质的偷懒不仅仅是节省开发时间,定向路由自动生成更是对文件夹以及文件位置归档的一种规范。(好吧,如果大家要是有不同意见,麻烦留情不要把我喷死)。
就如上面说的那样,最近有时间会追加父子路由的方式。
特殊声明:以上仅代表个人意见,不喜勿喷,觉得好记得点赞关注!