Vite-自动生成Vue路由

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

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

自动生成路由

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

src下新建views目录(项目的页面)

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

typescript 复制代码
// page.ts
export default {
    title: "登录页面",
};

自动生成路由逻辑

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

typescript 复制代码
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结构符合路由配置,并且也大大减少了我们手动增加代码的工作量。

相关推荐
小kian1 天前
vite安全漏洞deny解决方案
前端·vite
DevinJohw3 天前
为什么我选择[email protected]
react.js·vite
页面魔术4 天前
[译]专访尤雨溪: 2025年有什么计划?
前端·vue.js·vite
用户74054639943094 天前
Vite开发服务器遇到大量依赖需要优化导致重启的问题
vite
前端与小赵5 天前
webpack和vite之间的区别
前端·webpack·vite
给钱,谢谢!5 天前
记录vite引入sass预编译报错error during build: [vite:css] [sass] Undefined variable.问题
前端·css·sass·vite
小遁哥5 天前
vue3接入tailwindcss3
css·vue.js·vite
xiaoyan20158 天前
vue3.5+deepseek+arco+markdown搭建web版流式输出AI模板
vue.js·vite·deepseek
wordbaby8 天前
Vite 中的 Import 打包机制详解
前端·vite
Yvette-W8 天前
【更新中】【React】基础版React + Redux实现教程(Vite + React + Redux + TypeScript)
前端·javascript·react.js·typescript·前端框架·vite·redux