@ux-plus/ux-router-vue

简介

自动扫描生成路由文件夹下的组件文件并生成相应的路由配置。

安装

npm i @ux-plus/ux-router-vue -D

使用方式

import AutoRouter from '@ux-plus/ux-router-vue';
import { defineConfig } from 'vite';


export default defineConfig({
    plugins:[
        AutoRouter({
            includes:[
                {
                    viewDir:'src/views',
                }
            ],
            outputFileName:'index.ts',
            outputDir:'src/router/routes',
            alias:'@:/src',
            quotationMark:'double',
            meta:{
                title:'[name]',
            },
            extraRoutes:[
                { 
                    path: '/:productName',
                    redirect:'/home'
                },
                {
                    path:'/test',
                    component:'@/views/test/index.vue'
                }
            ]
        })
    ]
});

根据上述配置生成以下文件内容

假设目录结构为：

src
├── systemViews
│   └── erros
│       ├── 404
│       │   └── index.vue
│       └── index.vue
└── views
    ├── detail
    │   ├── [id].vue
    │   └── meta.json
    ├── home
    │   ├── index.vue
    │   └── meta.json
    ├── layout
    │   ├── erros
    │   │   ├── 404
    │   │   │   ├── index.vue
    │   │   │   └── meta.json
    │   └── index.vue
    └── list
        ├── index.vue
        └── meta.json

生成文件：src/router/routes/index.ts

export  default  [
    {
        name: 'list',
        path: '/list',
        component: () => import('@/views/list/index.vue'),
        meta: {
            title: 'list'
        }
    },
    {
        name: 'layout',
        path: '/layout',
        component: () => import('@/views/layout/index.vue'),
        meta: {
            title: 'layout'
        },
        children: [
            {
                name: 'layout-errors-404',
                path: '/layout/errors/404',
                component: () => import('@/systemViews/erros/404/index.vue'),
                meta: {
                    title: 'layout-errors-404'
                }
            }
        ]
    },
    {
        name: 'home',
        path: '/home',
        component: () => import('@/views/home/index.vue'),
        meta: {
            title: 'home'
        }
    },
    {
        name: 'details',
        path: '/details/:id',
        component: () => import('@/views/details/[id].vue'),
        meta: {
            title: 'jlag'
        }
    },
    {
        name: 'errors',
        path: '/errors',
        component: () => import('@/systemViews/errors/index.vue'),
        meta: {
            title: 'errors'
        },
        children: [
            {
                name: 'errors-404',
                path: '/errors/404',
                component: () => import('@/systemViews/errors/404/index.vue'),
                meta: {
                    title: 'errors-404'
                }
            }
        ]
    },
    // 以下是通过 extraRoutes 添加的路由
    {
        path: '/test',
        component: () => import('@/views/test/index.vue'),
        children: [
            {
                name: 'home',
                path: '/layout/home',
                component: () => import('@/views/layout/home/index.vue'),
                meta: {
                    title: 'home'
                }
            }
        ]
    },
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/:productName',
        redirect: '/home'
    }
];

meta元数据可以通过 meta.json 写入
meta.json 中可以通过link字段指定路由组件导入路径
即使没有 meta.json 也会自动给你写入一个title属性并根据文件名进行命名

如：

/src/views/layout/errors/404/meta.json

{
    "link": "@/systemViews/erros/404/index.vue",
    "title":"404"
}

配置项

includes

description: 指定要检测的路由目录

value: string|RegExp[]

default:

includes:[
    {
        viewDir:'src/views', 
        // 指定要检测的路由目录路径
        excludeDir:['components'] 
        // 排除指定路由目录中的所有“components”文件夹
        // 写字符串‘ component ’等于: /**/components/**/
    }
]

example:

includes:[
    {
        viewDir:'src/views',
        excludeDir:['components']
    },
    {
        viewDir:'src/systemRoutes', 
        excludeDir:['components',/systemComponents/g]
    }
]

outputDir

description: 指定输出路由文件的位置

default: src/router/routes

example:

outputDir:'src/router/routes',

alias

description: 生成路由引入时的别名路径

default: @:/src

example:

alias:'@:/src'

quotationMark

description: 指定在生成路由文件内容是单引号还是双引号

default: double

example:

quotationMark: 'double'
// or
quotationMark: 'single'

meta

description: 路由元数据中的值

default:

meta:{
        title:'[name]' 
        // [name] 根据文件名进行替换
}

example:

meta:{
        title:'[name]', 
        id:1,
}

outputFileName

description: 指定生成的路由文件的名称

default: index.ts

example:

outputFileName: 'index.ts'

extraRoutes

description: 添加额外的路由

default: undefined

example:

extraRoutes:[
    { 
        path: '/',
        redirect:'/layout/home'
    },
    {
        path:'/test',
        component:'@/extraRoutes/test/index.vue' 
        // 它会转换成：() => import('@/extraRoutes/test/index.vue')
    },
    { 
        path: '/:productName',
        redirect:'/404'
    }
],