Vite-自动生成Vue路由

大部分Vue项目使用路由都是在src/router/index.ts中增加routes的配置，如下图

我们可以看到routes的配置重复的代码非常多，且当我们项目页面开始变多时，routes里的元素也会越来越多。

自动生成路由

当我们在页面目录下新建页面文件时，自动帮我们完成routes的配置。

src下新建views目录（项目的页面）

每个页面有个page.ts文件用去设置页面的meta属性

// page.ts
export default {
    title: "登录页面",
};

自动生成路由逻辑

在src/router/index.ts中书写逻辑

import { createRouter, createWebHistory } from "vue-router";

// 读取views下的page.ts文件
const pages = import.meta.glob("../views/**/page.ts", {
    eager: true,
    import: "default",
});
// 读取views下的index.vue文件
const pageComponents = import.meta.glob("../views/**/index.vue");

const routes = Object.entries(pages).map(([pagePath, meta]) => {
    const path = pagePath.replace("../views", "").replace("/page.ts", "") || "/";
    const name = path.split("/").filter(Boolean).join("-") || "index";
    const component = pagePath.replace("page.ts", "index.vue");

    return {
        name,
        path,
        component: pageComponents[component],
        meta,
    };
});



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

export default router;

总结

生成的routes结构符合路由配置，并且也大大减少了我们手动增加代码的工作量。