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

相关推荐
王小金Ryan3 天前
开发一个Vite插件,给所有DOM节点插入自定义属性
vue.js·vite
前端霸王防脱发洗发水5 天前
Vite常用插件配置
javascript·vue.js·vite
friend_ship8 天前
Vue3.0都有哪些新特性及优化点
vue.js·vite·vue3.0·es6新特性·proxy响应式对象
jason_yang8 天前
vue3复习-源码-迷你版vite
vue.js·vite
jason_yang8 天前
vue3复习-源码-编译原理-自定义vite插件
vue.js·vite
小霖家的混江龙8 天前
Vite 打包 H5 如何注入版本号
前端·vite
web_code9 天前
vite依赖预构建(源码分析)
前端·面试·vite
yinshimoshen17 天前
基于vite实现基本的浏览器兼容解决方案
前端·vite
applebomb21 天前
vite server正则表达式
正则·vite·proxy·regexp·转发·server
o翔哥o24 天前
我把大型团队项目从 vite 前端迁移到了 rsbuild,收益如何?
前端·vite·前端工程化