vite-plugin-vue-auto-routes

一个约定式路由插件，可以快速帮你生成对应的路由配置文件（约定大于配置）

熟悉Nuxt，Next，Umi的开发者肯定对约定式路由都很熟悉，当你工程是使用vite搭建时，安装上该插件你也可以拥有前面这几个框架的约定式路由开发体验。

安装

npm i vite-plugin-vue-auto-routes

yarn add vite-plugin-vue-auto-routes

pnpm i vite-plugin-vue-auto-routes

基本使用

// vite.config.js
import { defineConfig } from 'vite'
import vitePluginVueAutoRoutes from 'vite-plugin-vue-auto-routes'

export default defineConfig({
  plugins: [
    vitePluginVueAutoRoutes({
        // options
    })
  ],
})

Options

| 参数名 | 类型 | 默认值 | 说明 | | :--------: | :------: | :--------: | :--------------------: | | pageDir | string | src/views | 页面所在的目录 | | outputDir | string | src/router | 生成路由配置文件的目录 | | name | string | routes | 生成路由配置文件的名字 | | outputType | string | .js | 生成路由配置文件的类型 | | lazy | boolean | false | 路由懒加载 | | watch | boolean | true | 监听pageDir目录变化 |

目录结构

/vue-project
  ├── src
  │   ├── router
  │   │   └── index.js
  │   ├── views
  │	  │	  │── Index
  │   │   │   ├── Index.meta.json  // 添加路由元信息
  │   │   │   └── Index.vue
  │   │   ├── About
  │   │   │   ├── Index
  │   │   │   │   ├── Index.meta.json 
  │   │   │   │   └── Index.vue
  │   │   │   ├── [id]   // 动态路由
  │   │   │   │   ├── Index.meta.json 
  │   │   │   │   └── Index.vue
  │   │   ├── Home
  │   │   │   ├── Index
  │   │   │   │   ├── Index.meta.json 
  │   │   │   │   └── Index.vue
  │   │   │   ├── _[id]   // 嵌套动态路由
  │   │   │   │   ├── Index.meta.json 
  │   │   │   │   └── Index.vue
  │   │   └── User
  │   │       ├── Index
  │   │       │   ├── Index.meta.json
  │   │       │   └── Index.vue
  │   │       ├── _Profile  // 嵌套路由
  │   │       │   ├── Profile.meta.json
  │   │       │   └── Profile.vue
  │   └── main.js
  └── vite.config.js

添加路由元信息

// src/views/Index/Index.meta.json
{
    "a":1,
    "meta":{
        "auth":true
    }
}

生成的配置文件

// src/router/routes.js
export const routes =  [
  {
    path: '/',
    component: ...,
    a:1,
    meta:{
      auth:true
  	}
  },
  {
    path: '/about',
    component: ...
  },
  {
    path: '/about/:id',
    component: ...
  },
  {
    path: '/home',
    component: ...,
    children:[
      {
        path: ':id',
        component: ...
      },
    ]    
  },
  {
    path: '/user',
    component: ...,
    children:[
      {
        path: 'profile',
        component: ...
      },
    ]  
  }
]