【Vite】自动生成路由

代码

import { createRouter, createWebHistory } from 'vue-router'

// 需要在每一个页面新建page.js，在该文件中配置路由的meta信息。示例：
// export default {title:'首页',menuOrder:1}w

const pages = import.meta.glob("../views/**/page.js", {
    eager: true,
    import: 'default'
})

const components = import.meta.glob("../views/**/index.vue", {
    eager: true,
    import: 'default'
})

const routes = Object.entries(pages).map(([path, meta]) => {
    const compPath = path.replace("'page.js", "index.vue")
    path = path.replace("../views", "").replace("/page.js", "") || "/";
    const name = path.split("/").filter(Boolean).join("-") || "index";
    return {
        path,
        name,
        component: () => import(components[compPath]),
        meta
    }
})

export const router = createRouter({
    history: createWebHistory(),
    routes
})

知识点

• 约定大于配置，即根据目录结构自动生成路由配置。
• 获取编译时态的目录结构。vite(import.meta.glob) webpack(require.context)
• Object.entries() 返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组
• stringObj.split() 把一个字符串分割成字符串数组
• stringObj.replace(oldStr,newStr) 返回用newStr替换oldStr后的新字符串
• ArrayObj.filter(Boolean)是一种简写，完整写法是：ArrayObj.filter((x)=>Boolean(x))