lf-auto-router

vue3自定义路由工具,根据指定目录下面的vue文件中的defineOptions宏中的Page属性,自动生成路由,支持动态路由和嵌套路由.

Install

npm install lf-auto-router

Usage

vite.config.ts

import { defineConfig } from 'vite';
import { scanVueDefineOptionsPlugin, vueAutoRouterPlugin } from 'lf-auto-router';

export default defineConfig({
  ...
  plugins: [scanVueDefineOptionsPlugin(), vueAutoRouterPlugin(), vue() ...],
  ...
});

main.ts

import { createApp } from 'vue';
import App from './App.vue';
import createAutoRouter from 'virtual:vue-auto-router';

const app = createApp(App);
const router = createAutoRouter();
app.use(router);
app.mount('#app');

eslint.config.ts

...
settings: {
  ...
  'import/core-modules': ['virtual:vue-auto-router'],
  ...
},
...

引入ts声明
在src/vite-env.d.ts 或 src/shims.d.ts 或 其他.d.ts文件中,添加: 

/// <reference types="lf-auto-router/virtual" />