vue路由自动生成插件（含vue-router3和vue-router4写法）

前言

好久没冒泡了，之前被上一家公司加班加到厌恶代码了，现在有空就来继续为插件库添砖加瓦。

插件说明

本插件用于 vue-cli 脚手架中的路由自动生成，免除手写路由导致的漏写或没有及时同步修改问题。

插件安装

yarn add pikaz-vue-auto-router

npm i -S pikaz-vue-auto-router

示例

项目结构

├─public
└─src
    └─views
        ├─home
            └─index.vue
        └─second
            ├─first
            |   └─index.vue
            └─second
                └─index.vue

生成的路由列表

;[
    {
     
        component: () => import('@/views/home'),
        meta: {
      name: 123 },
        path: '/home',
    },
    {
     
        component: () => import('@/views/second/first'),
        meta: {
      name: 123 },
        path: '/second/first',
    },
    {
     
        component: () => import('@/views/second/second'),
        meta: {
      name: 123 },
        path: '/second/second',
    },
]

路由文件配置

在 router 路由文件中

vue-router3 写法

import Vue from 'vue'
import VueRouter from 'vue-router'
import routesList from 'pikaz-vue-auto-router'

Vue.use(VueRouter)

const routes = [...routesList]

const router = new VueRouter({
     
    mode: 'history',
    routes,
})

export default router

vue-router4 写法

import {
      createRouter, createWebHashHistory } from 'vue-router'
import routesList from 'pikaz-vue-auto-router'
const routes = [...routesList]

const router = createRouter({
     
    history: createWebHashHistory(),
    routes,
})

export default router

插件使用

在 src 文件夹下的 views 文件夹中，添加页面文件夹，页面文件夹中的 index.vue 文件即为路由文件，路由路径为相对于 views 文件夹路径。

js 中添加 meta 信息 为路由 meta 信息

<template>
  <div>
  </div>
</template>

<script>
export default {
     
  meta: {
     
    name: 123,
  },
};
</script>

最终效果如示例所示

项目地址

https://github.com/pikaz-18/pikaz-vue-auto-router

如果对你有帮助的话，点个赞吧~