2023年7月4日发(作者：)

vue路由⽂件⾃动化处理你还在⼀个个路由⽂件引⼊⽽烦恼吗你还被别⼈说，你只是⼀个只会ctrl+ c ctrl +v的码仔吗可是做个与世⽆争的垃圾不好吗//

可以把检测的类型去掉，转成js//

关键在于 t//

暴露了两个⽅法

在组件声明两个变量来区别状态 isRouter isComponentimport Vue from "vue";//

获取component下所有vue⽂件function getComponent() { return t("../components", true, /.vue$/);}//

获取views下所有vue⽂件function getRouterComponent() { return t("../views", true, /.vue$/);}//

⾸字母转换⼤写function viewToUpperCase(str: string) { return (0).toUpperCase() + (1);}//

⾸字母转换⼩写function viewToLowerCase(str: string) { return (0).toLowerCase() + (1);}export const vueComponent = () => { //

获取⽂件全局对象 isComponent const requireComponents = getComponent(); ().forEach((fileSrc: string) => { const fileName = requireComponents(fileSrc); const file = s; const componentName = ; if (onent) { //

判断是不是组件 ent(componentName, t || fileName); } });};export const vueRouters = () => {export const vueRouters = () => { //

获取路由⽂件 isRouter const routerList: any = []; const requireRouters = getRouterComponent(); ().forEach((fileSrc: string) => { //

获取 components

⽂件下的⽂件名 const viewSrc = requireRouters(fileSrc); const file = s; //

⾸字母转⼤写 const vueRouterUpper = viewToUpperCase(); //

⾸字母转⼩写 const vueRouterLower = viewToLowerCase(); //

设置路由路由路径 const fileNameSrc = e(/^./, ""); //

是否⾃动注册路由依据每个⽂件⾥的 isRouter

属性

避免注册不⽤的路由 if (er) { //

判断是不是路由⽂件 //

注册路由 ({ path: `/${vueRouterLower}`, name: `${vueRouterUpper}`, component: () => import(`@/views/${fileNameSrc}`), meta: { index: 1 } }); } }); return routerList;};export default class Home extends Vue { static isRouter: boolean = true; }export default class Home extends Vue { static isComponent: boolean = true; }组件在使⽤import { vueComponent } from "./utils/global";vueComponent()路由在使⽤import { vueRouters } from "../utils/global";const router = new VueRouter({ mode: "history", base: _URL, routes: [ { path: "/", redirect: "/home" }, ...vueRouters() ]});简单的路由，组件模块是可以这样秀⼀波了我原本以为：⽜* 啊，好* 啊。以后项⽬就这样搞。可是，今天作项⽬的时候，我⼆级路由，参数:id这些⽅案怎么破⼀切⼜感觉回到了起点（组件注册可以）以下是其中⼀个上⼤佬的,仿照e/// import Vue from 'vue'let files = t('../pages', true, /.vue$/) //

根据⽬录结构去搜索⽂件let filesKey = () //

获取整个⽬录结构(filesKey)/** *

获取路由name * @param {*} file type：string

（⽂件完整的⽬录） */const getRouteItemName = (file) => { let match = (/(.+?).vue$/)[1] //

去除相对路径与.vue let res = e(/_/ig, '').replace(//ig, '-') //

把下划线去除，

改变/为-拼接 return res}/** *

获取路由path * @param {*} file String

（⽬录，⼀级路由则为完整⽬录，多级为⾃⾝⽬录名称） */const getRouteItemPath = (file) => { return e('/', '').replace('', '').replace('vue', '').replace(/_/g, ':').replace(/./g, '')}/** *

注册组建 * @param {*} componentConfig

（即为调⽤files⽅法得出的componentConfig） */// const registerComponent = (componentConfig) => ent( || t, t || componentConfig)/** *

校验⽬录下是否有其他⽂件,注意((?!${name}).)是因为要查询的⽬录有可能为name/，⽽这样可能会导致误判有⽆children，所以要匹配⾮name。 * @param {*} file type：string

（当前⽬录路径） * @param {*} name type：string

（⽬录的⽂件名

默认等于file参数） */const hasfile = (file, name = file) => new RegExp(file + `/((?!${name}).)`)/** *

校验.vue⽂件 * @param {*} file type：string

（当前⽬录路径） */const hasVue = (file) => new RegExp(file + '.vue')/** *

构建路由 * @param {*} map type：Object */const getRoutes = (map) => { let res = [] for (let key in map) { //

遍历对象 let level = map[key] //

取出对应value let text = ('@') //

⽤@把分级数组拼接，这样只是为了⽅便查找 let expr1 = hasfile(key) //

校验规则，有⽆⼦⽂件 let expr2 = hasVue(key) //

校验规则，有⽆vue⽂件 let route = {} //

初始化route if ((expr1) && (expr2)) { //

有children的route let max = (...(v => (/(.+?).vue$/)[1].split('/').length)) //

找⽬录⾥最深的层级数 let i = 0 //

标记层级 while (i++ < max) { //

按层级来搭建route h((item) => { let wipeOfVue = (/(.+?).vue$/)[1] //

匹配纯路径,去除相对路径与.vue let classArray = ('/') //

切割为了⽅便操作 let len = //

深度 if (len === i) { if (i === 1) { //

如果为第⼀层，则必带有children route = { component: files(item).default, path: getRouteItemPath(item), children: [] } } else { let file = (/(.+?).vue$/)[1] //

只匹配⽬录下.vue之前的路径 let name = classArray[len - 1] //

获取每个路径下具体的⽂件名 let iteration = (0, len - 1) //

截取⽂件路径 let childRoute = { component: files(item).default, path: getRouteItemPath(name) } //

从⽂件的⽬录下搜索有⽆⼦⽂件，有⼦⽂件代表有children属性。

否则⽆，则直接给route增加name属性 (hasfile(file, name)) && (hasVue(file)) ? en = [] : = getRouteItemName(item) //

通过截取的⽬录找到对应的parent let parent = ((map, current, index) => { let path = index === 0 ? getRouteItemPath(`/${current}.vue`) : getRouteItemPath(`${current}.vue`) return (v => === path)[0].children }, [route]) parent && (childRoute) } } }) } (route) //

添加route对象 } else { //

没有children，直接遍历插⼊ h(item => { route = { component: files(item).default, name: getRouteItemName(item), path: getRouteItemPath(item) } (route) //

添加route对象 }) } } return res //

返回整个route对象}/** *

以⼀级⽂件或者⽂件夹

分类获取路由 */const createClassify = () => { let map = ((map, cur) => { let dislodge = (/(.+?).vue$/)[1] //

只匹配纯⽂件名的字符串 let key = ('/')[0]; //

拿到⼀级⽂件的名称 (map[key] || (map[key] = [])).push(cur) return map }, {}) return getRoutes(map)}const freeRoute = createClassify()(freeRoute)const routes = [ ...freeRoute]export default routesroute/rt Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes'(VueRouter)const router = new VueRouter({ mode: 'history', base: _URL, routes})export default router还有多少兄弟姐妹还在岗位上的，注意防护，安全出⾏回家第⼀天，可能就已经被爸妈嫌弃了