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项目自动识别指定文件目录生成路由的主要内容,如果未能解决你的问题,请参考以下文章