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

相关推荐
浩龙不eMo1 小时前
前端获取环境变量方式区分(Vite)
前端·vite
Emma歌小白1 天前
Vite 和 Vue CLI 比较
vue.js·vite
Sahas10191 天前
vite+vue2+elementui构建之 package.json
elementui·vue·vite
jserTang5 天前
前端构建工具漫谈:Webpack、Vite、Turbopack 与 Rspack 的终极对决
前端·webpack·vite
jaywangep6 天前
vite插件:提取项目中第三方域进行dns-prefetch预连接
性能优化·vite
wordbaby7 天前
加速 Web 应用:资源压缩详解与 Vite + Nginx 实践指南
前端·nginx·vite
huali7 天前
unplugin-https-reverse-proxy 2.0 发布:革新移动端调试体验
前端·开源·vite
sen_shan7 天前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
是二牙8 天前
vue3+vite 多个环境配置
前端·vue3·vite
bnnnnnnnn10 天前
做了个 Vue3 上传大文件的项目,顺手搞懂了 OSS、Pinia 和断点续传
前端·javascript·vite