vue3 + vite 中使用import.meta.glob实现路由加载

import.meta.glob: vite官网

import.meta.glob的方法接受一个路径参数，会匹配这个路径下的文件转换成一个对象

首先，需要定义一个路径模式，用于匹配需要导入的模块。该模式可以使用 * 或 ** 通配符，也可以使用感叹号 ! 进行反选。例如，以下是一些常见的路径模式：

• 匹配某个文件夹下的所有 .js 文件：./path/*.js
• 匹配某个文件夹及其子文件夹下的所有 .vue 文件：./path/**/*.vue
• 排除某个文件夹下的某个文件：./path/!(*.md)

需要注意的是，路径模式中的通配符和反选符号只能出现在路径的末尾，不能出现在路径的中间或开头。

方法使用：

const modules = import.meta.glob('../views/**/*.vue')

得到的modules会转化为一个对象：如下

简单使用 => 直接遍历成路由对象

let routeList = []
for (let key in modules) {
    let obj = {
        path: key.relace('../views', ''),
        name: key.relace('../views', ''),
        component: modules[key]
    }
    routeList.push(obj)
}

const router = createRouter({
  history: createWebHashHistory(),
  routes: routeList
})