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)

特点:

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

注意事项：

在根目录下 .gitignore 文件追加一行忽略匹配规则 temp.*
在根目录下 .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"
                }
            }
        }]
    }]
}];

🚦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

2.6k Jan 4, 2023

🚦 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

18.9k Dec 30, 2022

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

110 Nov 10, 2022

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

11 Nov 16, 2020

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

57 Nov 12, 2022

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

0 Dec 23, 2021

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