vitevite项目自动识别指定文件目录生成路由

Posted 2023-02-05 GHUIJS

安装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: ƒ