【vite】vite项目自动识别指定文件目录生成路由

安装vite-plugin-pages

我用的版本("vite-plugin-pages": "^0.27.1")

pnpm i vite-plugin-pages

配置

//vite.config.ts
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";

import Pages from "vite-plugin-pages";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Pages({
      dirs: "./src/views",//指定生成路由的目录
      extensions: ["vue"],//文件后缀
      exclude: ["**/src/*.vue"],//可以排除指定目录
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

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

// @ts-ignore
import routes from "~pages";
console.log(routes);

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      redirect: { name: routes[0].name },
      children: [...routes],
    },
  ],
});

export default router;

效果：

路由传参写法

生成的路由长这样：

{name: 'test-id', path: '/test/:id', props: true, component: ƒ}