vue路由文件自动化处理

你还在一个个路由文件引入而烦恼吗

你还被别人说，你只是一个只会ctrl+ c ctrl +v的码仔吗

可是

做个与世无争的垃圾不好吗

global.ts


//  可以把检测的类型去掉，转成js// 关键在于  require.context// 暴露了两个方法 在组件声明两个变量来区别状态 isRouter  isComponentimport Vue from "vue";// 获取component下所有vue文件
function getComponent() {return require.context("../components", true, /\.vue$/);
}
// 获取views下所有vue文件
function getRouterComponent() {return require.context("../views", true, /\.vue$/);
}// 首字母转换大写
function viewToUpperCase(str: string) {return str.charAt(0).toUpperCase() + str.slice(1);
}
// 首字母转换小写
function viewToLowerCase(str: string) {return str.charAt(0).toLowerCase() + str.slice(1);
}export const vueComponent = () => {// 获取文件全局对象  isComponentconst requireComponents = getComponent();requireComponents.keys().forEach((fileSrc: string) => {const fileName = requireComponents(fileSrc);const file = fileName.default.options;const componentName = file.name;if (fileName.default.isComponent) { // 判断是不是组件Vue.component(componentName, fileName.default || fileName);}});
};export const vueRouters = () => {// 获取路由文件 isRouterconst routerList: any = [];const requireRouters = getRouterComponent();requireRouters.keys().forEach((fileSrc: string) => {// 获取 components 文件下的文件名const viewSrc = requireRouters(fileSrc);const file = viewSrc.default.options;// 首字母转大写const vueRouterUpper = viewToUpperCase(file.name);// 首字母转小写const vueRouterLower = viewToLowerCase(file.name);// 设置路由路由路径const fileNameSrc = fileSrc.replace(/^\.\//, "");// 是否自动注册路由依据每个文件里的 isRouter 属性 避免注册不用的路由if (viewSrc.default.isRouter) { // 判断是不是路由文件// 注册路由routerList.push({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;}

组件在main.js使用

import { vueComponent } from "./utils/global";
vueComponent()

路由在router.js使用

import { vueRouters } from "../utils/global";const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes: [{path: "/",redirect: "/home"},...vueRouters()]
});

简单的路由，组件模块是可以这样秀一波了

我原本以为：牛* 啊，好* 啊。以后项目就这样搞。可是，今天作项目的时候，我二级路由，参数:id这些方案怎么破

一切又感觉回到了起点（组件注册可以）

在git上找到两个，附上地址
https://github.com/zhangOking/vuecli3plugin-generatererouter
https://github.com/18692959234/free-router

以下是其中一个上大佬的,仿照nuxt.js

route/route.js

// import Vue from 'vue'
let files = require.context('../pages', true, /\.vue$/) // 根据目录结构去搜索文件
let filesKey = files.keys() // 获取整个目录结构
console.log(filesKey)
/*** 获取路由name* @param {*} file type：string （文件完整的目录）*/
const getRouteItemName = (file) => {let match = file.match(/\/(.+?)\.vue$/)[1] // 去除相对路径与.vuelet res = match.replace(/_/ig, '').replace(/\//ig, '-') // 把下划线去除， 改变/为-拼接return res
}/*** 获取路由path* @param {*} file String （目录，一级路由则为完整目录，多级为自身目录名称）*/
const getRouteItemPath = (file) => {return file.replace('/index.vue', '').replace('index.vue', '').replace('vue', '').replace(/_/g, ':').replace(/\./g, '')
}/*** 注册组建* @param {*} componentConfig （即为调用files方法得出的componentConfig）*/
// const registerComponent = (componentConfig) => Vue.component(componentConfig.default.name || componentConfig.default, componentConfig.default || componentConfig)/*** 校验目录下是否有其他文件,注意((?!${name}).)是因为要查询的目录有可能为name/name.vue，而这样可能会导致误判有无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] // 取出对应valuelet text = level.join('@') // 用@把分级数组拼接，这样只是为了方便查找let expr1 = hasfile(key) // 校验规则，有无子文件let expr2 = hasVue(key) // 校验规则，有无vue文件let route = {} // 初始化routeif (text.match(expr1) && text.match(expr2)) { // 有children的routelet max = Math.max(...level.map(v => v.match(/\/(.+?).vue$/)[1].split('/').length)) // 找目录里最深的层级数let i = 0 // 标记层级while (i++ < max) { // 按层级来搭建routelevel.forEach((item) => {let wipeOfVue = item.match(/\/(.+?).vue$/)[1] // 匹配纯路径,去除相对路径与.vuelet classArray = wipeOfVue.split('/') // 切割为了方便操作let len = classArray.length // 深度if (len === i) {if (i === 1) { // 如果为第一层，则必带有childrenroute = {component: files(item).default,path: getRouteItemPath(item),children: []}} else {let file = item.match(/(.+?)\.vue$/)[1] // 只匹配目录下.vue之前的路径let name = classArray[len - 1] // 获取每个路径下具体的文件名let iteration = classArray.slice(0, len - 1) // 截取文件路径let childRoute = {component: files(item).default,path: getRouteItemPath(name)}// 从文件的目录下搜索有无子文件，有子文件代表有children属性。 否则无，则直接给route增加name属性text.match(hasfile(file, name)) && text.match(hasVue(file)) ? childRoute.children = [] : childRoute.name = getRouteItemName(item)// 通过截取的目录找到对应的parentlet parent = iteration.reduce((map, current, index) => {let path = index === 0 ? getRouteItemPath(`/${current}.vue`) : getRouteItemPath(`${current}.vue`)return map.filter(v => v.path === path)[0].children}, [route])parent && parent.push(childRoute)}}})}res.push(route) // 添加route对象} else { // 没有children，直接遍历插入level.forEach(item => {route = {component: files(item).default,name: getRouteItemName(item),path: getRouteItemPath(item)}res.push(route) // 添加route对象})}}return res // 返回整个route对象
}/*** 以一级文件或者文件夹 分类获取路由*/
const createClassify = () => {let map = filesKey.reduce((map, cur) => {let dislodge = cur.match(/\/(.+?)\.vue$/)[1] // 只匹配纯文件名的字符串let key = dislodge.split('/')[0]; // 拿到一级文件的名称(map[key] || (map[key] = [])).push(cur)return map}, {})return getRoutes(map)
}const freeRoute = createClassify()
console.log(freeRoute)
const routes = [...freeRoute
]export default routes

route/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

还有多少兄弟姐妹还在岗位上的，注意防护，安全出行

回家第一天，可能就已经被爸妈嫌弃了

vue路由文件自动化处理相关推荐

vue路由文件相关配置
vue路由文件相关配置 vue路由文件相关配置一.vue嵌套路由路径斜杠'/'的使用 1.根组件上的path 2.根组件上的redirect 3.子组件里面的path 总结二.路由守卫 1.作用 ...
Vue脚手架与Vue路由
一.Vue脚手架 1.安装脚手架脚手架是基于node的环境. nodejs安装脚手架全局安装:在cmd提示命令符中输入 npm i -g @vue/cli 检测是否安装成功:安装好后可输入vue ...
router vue 多个路径_多个vue子路由文件自动化合并的方法，
多个vue子路由文件自动化合并的方法, 1. 目录结构废话不多说,直接上图. 目录结构,如下图所示 2. 代码编写位置在router目录下面的index.js文件中写入以下代码 import Vu ...
vue拆分js文件_基于Vue+Webpack拆分路由文件实现管理
事实是,如果你的项目不是特别大,一般是用不着分拆的.如果项目大了,那就需要考虑分拆路由了.其实,这个操作并不复杂. 当我们用 vue-cli 工具,创建一个新的 vue 项目时,就已经给大家新建好了一 ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
vue2.0 点击跳转传参--vue路由跳转传参数
vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转 1. router-link [html] view plaincopy <r ...
vue路由匹配实现包容性_包容性设计：面向老年用户的数字平等
vue路由匹配实现包容性 In Covid world, a lot of older users are getting online for the first time or using tec ...
vue 路由知识点梳理及应用场景整理
最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚.现在重新看一遍文档,重新梳理一下. vue 路由的原理说实话,路由我一直也就 ...

vue路由文件自动化处理

可是

还有多少兄弟姐妹还在岗位上的，注意防护，安全出行

回家第一天，可能就已经被爸妈嫌弃了

vue路由文件自动化处理相关推荐

最新文章

热门文章