2022-11-04

在vite+vue3+ts项目下，实现根据文件名称自动生成路由

1、安装插件

npm install vite-plugin-pages -D
npm install vue-router

2、在vite.config.ts中完成vite-plugin-pages 的配置
pages为放置vue页面的文件夹名称

import Pages from 'vite-plugin-pages'
export default defineConfig({
  plugins: [
    vue(),
    /**根据文件名自动生成对应路由 @see https://github.com/hannoeru/vite-plugin-pages*/ 
    Pages({
      dirs: [
        {dir: 'src/pages', baseRoute: ''},
        {dir: 'src/pages/active', baseRoute: 'active'},
      ],
      exclude: ['**/components/*.vue'],
    })
)}

3、在main.ts中创建一个router，并让 app use

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import './style.css'
import routes from 'pages-generated' // vite-plugin-pages 生成的路由信息
import App from './App.vue'
const router = createRouter({
  history: createWebHistory(),
  routes
})
const app = createApp(App)
app.use(router).mount('#app')

4、在App.vue中添加router-view

5、添加测试页面