hbq-vue-auto-create-route

Overview

vue-auto-create-route

根据 @/src/pages/**/meta.json 作为路由特征,智能识别 vue 项目页面结构,自动生成 vue routes 到 @/router/temp.router.js

2021-02-27 更新,支持多层级父组件模块自动继承嵌套,详见 src/examples 示例,npm run examples 运行查看效果 (需要在src/examples/下装包)

2021-3-30 更新,只要叶子节点有 meta.json 父路径会自动补全,详见 src/examples

2021-9-1 更新,支持自定义页面入口目录对应参数: entryPath,示例: new AutoCreateVueRouteWebpackPlugin({entryPath:'views'}) (以当前工程的 ./src 为根目录,定义为 ./src/views)

特点:

  1. 实现工程路由以约定大于配置哲学进行定义
  2. 自动递归识别生成目录层级,支持无限级
  3. 结合导航组件自动生成菜单,支持无限级
  4. 支持各路径权限单独配置,无需写成一个大文件
  5. 修改页面路径直接修改文件夹名称即可
  6. 自动对路径转中划线处理
  7. 采用 meta.json 方式配置页面元信息实现更多定制化需求场景
  8. 每个 meta.json 旁需要有 index.vue 才会视为可用路由,详见源码 src/examples 下目录结构示例
  9. 监听 src/pages 目录下的 meta.json 文件变化自动重新创建路由
  10. 支持 webpackplugin 方式使用
  11. process.env.NODE_ENV 为 production 时,不会开启 watch 监听
  12. 需要搭配固定根组件 @/components/main 作为各页面的框架组件

请保证有 @/components/main.vue 作为主框架容器组件,你的菜单组件可以在此应用

<template>
  <div>
    <div>主框架页面组件</div>
    <router-view />
  </div>
</template>

示例: meta.json

{
    "name": "your custom name", // 内置属性,非必须,可以覆盖默认生成的路由名 
    "path":":a/:b", // 内置属性,非必须,可以用来支持路径参数,如:/page1/:a/:b ,参数 this.$route.params.a 取值 
    "redirect":"default-child", //内置属性,非必须,父页面可以设置redirect定义默认子页面     -
    "menu": { //自定义 示例,如果不需要展示主界面菜单上,则不配置 menu 项
        "title": "看板",
        "icon": "el-icon-s-help"
    },
    "index": 1, // 内置属性,非必须,用于干预页面路由生成的顺序
    "layoutComponent": "@/components/[other-layout-component]", //内置属性,非必须,手动改变页面对应的容器组件,通常不需要配置
    "access": [ //自定义 示例,用于页面权限定义
        "ADMIN",
        "USER VISITOR",
        "GUEST",
        "VISITOR"
    ]
}

使用

直接使用

 ...ts
 import AutoCreateVueRouteWebpackPlugin from 'vue-auto-create-route'
 // 在任意文件中执行
 AutoCreateVueRouteWebpackPlugin()
     ...

webpack plugin 模式使用

import * as webpack from 'webpack'
import AutoCreateVueRouteWebpackPlugin from 'vue-auto-create-route/build/plugin'
import * as path from 'path'

webpack({
    context: __dirname,
    output: { path: path.join(__dirname, 'dist') },
    entry: path.join(__dirname, 'entry'),
    plugins: [
        // 可省略,第一个参数 cwd, outputRouteFilePath, rootLayoutComponent
        // 可省略,第二个参数监听选项 chokidar watchOptions
        // 可省略,第三个参数代表是否watch实时生成,process.env.NODE_ENV为production时强制不监听
        // new AutoCreateVueRouteWebpackPlugin({ cwd: __dirname }, null, true) 
        new AutoCreateVueRouteWebpackPlugin() 
    ]
},
    (err, stats) => {
        // console.error(err)
        // console.log(stats)
    }
)

vue.config.js @2.0

const AutoCreateVueRouteWebpackPlugin = require("vue-auto-create-route/build/plugin").default;
module.exports = {
  configureWebpack: {
    plugins: [new AutoCreateVueRouteWebpackPlugin()],
  },
};

vue.config.js @3.0

const AutoCreateVueRouteWebpackPlugin = require("vue-auto-create-route/build/plugin").default;
module.exports = {
  configureWebpack: {
    plugins: [new AutoCreateVueRouteWebpackPlugin({entryPath:'views'})],
  },
};

注意事项:

  1. 在根目录下 .gitignore 文件追加一行忽略匹配规则 temp.*
  2. 在根目录下 .eslintignore 文件追加一行忽略匹配规则 temp.*

最终生成的 @/router/temp.route.js

你可以直接使用该文件读取对应的 meta 节点数据供导航菜单组件使用

export default [{
        path: '/',
        component: () => import('@/components/main'),
        children: [{
            path: '/',
            "redirect": "parent",
            name: '/',
            fullPath: '/',
            component: {
                render(createElement) {
                    return createElement('router-view')
                }
            },
            meta: {
                "redirect": "parent",
                "menu": {
                    "title": "home",
                    "icon": "el-icon-s-help"
                },
                "yourCustom": "用户可以自定义任何属性",
                "index_describe": "index属性决定生成的菜单顺序,非必填",
                "access": ["ADMIN", "USER VISITOR", "GUEST", "VISITOR"]
            },
        }, ],
    },
    {
        path: '/parent',
        "redirect": "son-2",
        component: () => import('@/components/main'),
        children: [{
                path: '/',
                "redirect": "son-2",
                name: '/parent',
                fullPath: '/parent',
                component: {
                    render(createElement) {
                        return createElement('router-view')
                    }
                },
                meta: {
                    "redirect": "son2",
                    "menu": {
                        "title": "parent",
                        "icon": "el-icon-s-help"
                    },
                    "yourCustom": "用户可以自定义任何属性",
                    "index_describe": "index属性决定生成的菜单顺序,非必填",
                    "access": ["ADMIN", "USER VISITOR", "GUEST", "VISITOR"]
                },
            },

            {
                path: 'son-2',
                "redirect": "son2-1/xx/yyy",
                component: {
                    render(createElement) {
                        return createElement('router-view')
                    }
                },
                children: [{
                        path: '/',
                        "redirect": "son2-1/xx/yyy",
                        name: '/parent/son-2',
                        fullPath: '/parent/son-2',
                        component: {
                            render(createElement) {
                                return createElement('router-view')
                            }
                        },
                        meta: {
                            "redirect": "son2-1/xx/yyy",
                            "menu": {
                                "title": "son2",
                                "icon": "el-icon-s-help"
                            }
                        },
                    },

                    {
                        path: 'son2-1',
                        component: {
                            render(createElement) {
                                return createElement('router-view')
                            }
                        },
                        children: [{
                            path: ':a/:b',
                            name: 'mycustom-name',
                            fullPath: '/parent/son-2/son2-1',
                            component: () => import('@/pages/parent/son2/son2-1'),
                            meta: {
                                "name": "mycustom-name",
                                "path": ":a/:b",
                                "menu": {
                                    "title": "son2-1",
                                    "icon": "el-icon-s-help"
                                }
                            },
                        }, ],
                    }

                ],
            }

        ],
    }
];

export const metaJSONTree = [{
    "path": "/",
    "fullPath": "/",
    "name": "/",
    "meta": {
        "menu": {
            "title": "home",
            "icon": "el-icon-s-help"
        },
        "yourCustom": "用户可以自定义任何属性",
        "index_describe": "index属性决定生成的菜单顺序,非必填",
        "access": ["ADMIN", "USER VISITOR", "GUEST", "VISITOR"]
    }
}, {
    "path": "/parent",
    "fullPath": "/parent",
    "name": "/parent",
    "meta": {
        "menu": {
            "title": "parent",
            "icon": "el-icon-s-help"
        },
        "yourCustom": "用户可以自定义任何属性",
        "index_describe": "index属性决定生成的菜单顺序,非必填",
        "access": ["ADMIN", "USER VISITOR", "GUEST", "VISITOR"]
    },
    "children": [{
        "path": "/parent/son-2",
        "fullPath": "/parent/son-2",
        "name": "/parent/son-2",
        "meta": {
            "menu": {
                "title": "son2",
                "icon": "el-icon-s-help"
            }
        },
        "children": [{
            "path": "/parent/son-2/son2-1",
            "fullPath": "/parent/son-2/son2-1",
            "name": "mycustom-name",
            "meta": {
                "name": "mycustom-name",
                "menu": {
                    "title": "son2-1",
                    "icon": "el-icon-s-help"
                }
            }
        }]
    }]
}];
You might also like...
🚦This is the repository for Vue Router 4 (for Vue 3)
🚦This is the repository for Vue Router 4 (for Vue 3)

vue-router This is the repository for Vue Router 4 (for Vue 3) Supporting Vue Router Vue Router is part of the Vue Ecosystem and is an MIT-licensed op

🚦 The official router for Vue.js.
🚦 The official router for Vue.js.

vue-router This is vue-router 3.0 which works only with Vue 2.0. For the 1.x router see the 1.0 branch. Supporting Vue Router Vue Router is part of th

Generate sitemap.xml by vue-router configuration

vue-router-sitemap Generate sitemap.xml by vue-router configuration Install npm i --save vue-router-sitemap Example usage // router.js import VueRout

A Trie-based vue router with the ability of managing history.state.

vue-pilot A Trie-based vue router with the ability of managing history.state. Install npm install vue-pilot Features Small (8kb after gzipped). Abili

Vue language routing with (optional) localized URLs.
Vue language routing with (optional) localized URLs.

🌍 Vue Language Router Language routing and URL localization made easy. Built on top of 🚦 Vue Router and 🌐 Vue I18n. Demo You can play with demo at

Hello-vue-router

hello-vue-router Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Touring Vue Router Example App

Touring Vue Router Example App This is the Vue 3 application we build step by step in the Touring Vue Router course on Vue Mastery. It's starting code

A tool to generate routes for Vue-Router with Vite.

v-route-generate A tool to generate routes for Vue-Router with Vite. Getting Started Install v-route-generate # Choose a package manager you like. #

Generate Vue Router routes automatically using a markdown arborescence.

Generate Vue Router routes automatically using a markdown arborescence.

Owner
Bob Hu
a very cool js coder
Bob Hu
Elegant, fluent route definitions for Vue Router, inspired by Laravel. v3 is currently in beta. [email protected]

Elegant, fluent route definitions for Vue Router, inspired by Laravel. Routisan 3 is currently in beta. Stable release around the corner! npm i vue-ro

Mike Rockétt 207 Nov 4, 2022
Smart route search to make intelligent looking apps with Vue.js.

Make your users dynamically navigate routes, make smart commands and queries with a single directive. Vue Smart Route allows you to create a query sys

Fatih Kadir Akın 315 Nov 25, 2022
Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

Katashin 146 Nov 15, 2022
Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

Zen 0 Jul 3, 2021
Filesystem based route generation for Webpack + vue-router

@badrap/routdir Filesystem based route generation for Webpack + vue-router. @badrap/routdir is based on Sapper's pages and layouts features, with some

Badrap Oy 3 Jan 25, 2021
Vue route change loading. using Router Navigation Guards.

Vue Router Loading Easy to use and highly customizable Vue Router Loading. Getting started Install the package: npm install vue-router-loading Import

Ahmad Karimzade 16 Aug 28, 2022
Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

仙人掌 0 Dec 1, 2020
File system based route generator for ⚡️Vite

vite-plugin-pages File system based routing for Vue 3 applications using Vite ⚠️ Virtual Module name is changed to pages-generated since v0.2.0 Gettin

Han(ハン) 1.2k Jan 2, 2023
HTTPBin is a network tool provides request record service and custom route responses.

HTTPBin HTTPBin is a network tool provides request record service and custom route responses. You can public service that we deployed on the internet,

null 3 Sep 14, 2022