pnpm add vite-plugin-auto-vue-router -D
npm i vite-plugin-auto-vue-router -D
yarn add vite-plugin-auto-vue-router --dev
参数名 | 类型 | 默认值 | 说明 |
---|---|---|---|
dir | String | null | 指定目录下的.vue生成路由 |
eager | Boolean | true | true默认一次加载所有路由页面,false动态加载,只加载当前访问的页面 |
ignore | Array | ['!**/src', '!**/components'] |
默认过滤${dir} 目录下的src、components目录不创建为路由, |
关于 ignore 参数,配置ignore不会复盖原来的默认值,它只会增加过滤条件
如果不想要默认配置的过滤条件,移步demo示例说明
// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';
import { fileURLToPath, URL } from "url";
import AutoVueRouter from 'vite-plugin-auto-vue-router';
export default defineConfig({
plugins: [
AutoVueRouter({
dir: fileURLToPath(new URL('/src/pages/', import.meta.url))
}),
],
})
// main.ts
import AutoVueRouter from 'virtual:auto-vue-router';
VueApp.use(AutoVueRouter, { /* options */ });
参数名 | 类型 | 默认值 | 说明 |
---|---|---|---|
history | String | h5 | h5、hash、ssr |
index | String | 'index' | 指定首页的path |
errorPagePath | String | '404' | 访问页面不存在时的页面 |
h5 等于 createWebHistory
hash 等于 createWebHashHistory
ssr 等于 createMemoryHistory
//页面文件名: detail[id,uid,order_id].vue
//实际访问path: /detail/21/testing123/987654321
import { useRoute } from 'vue-router';
const route = useRoute();
// 参数读取
console.log(route.params.id) // = 21
console.log(route.params.uid) // = testing123
console.log(route.params.order_id) // = 987654321
import { useRoute, useRouter } from 'vue-router';
const Router = useRouter();
const route = useRoute();
// hiddenParams隐藏式参数传参,其实它与Router.push相同
// 例如:user.vue
Router.page({
name: 'user-detail',
hiddenParams:{ id: 9876543567 }
})
// user/detail.vue
console.log(route.params.id) // = 21
// 若无隐式传参的需求可以直接用router.push 进行跳转