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

Posted GHUIJS

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vitevite项目自动识别指定文件目录生成路由相关的知识,希望对你有一定的参考价值。

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

以上是关于vitevite项目自动识别指定文件目录生成路由的主要内容,如果未能解决你的问题,请参考以下文章

C# 连接数据库时 系统找不到指定的文件。

CodeSmith 多模板按目录树批量自动生成代码

python 项目自动生成requirements.txt文件

react-umi 光速上手

质量检测工具sonar如何排除指定的目录

vue配置文件自动生成路由和菜单