z-auto-route 基于 Vue Router 自动化路由

安装

1npm i -S z-auto-route

webpack 配置项

属性	描述	类型	是否必选	默认值
pages	需要自动生成文件的目录	String	否
importPrefix	import 引入页面文件的前缀目录	String	否	'@/views'
dynamic	是否按需加载	String	否	true
chunkNamePrefix	按需加载 chunkName 的前缀	String	否	无
layout	处理成布局文件的文件名	String	否	'_layout.vue'
routePath	路由生成的文件目录，如果设置了则会在当前项目指定目录生成路由文件，否则可以从z-auto-route导入	String	否	无

页面 customBlock 配置

在需要生成路由的 vue 文件头部加上z-route标签，里面为 json

1<z-route>
2  { "dynamic": false, "meta": { "title": "根布局页面" } }
3</z-route>

其中meta为vue-router配置的meta属性一致，dynamic为单独设置该路由是否为按需加载，不设置默认使用全局配置的dynamic

注意：

• 如果没有z-route标签则该页面不会不会生成路由

• 暂时只支持meta和dynamic两个设置项。

• 如果需要z-route标签高亮，可以设置 vs-code 的 settings.json

  1"vetur.grammar.customBlocks": {
  2  "z-route": "json"
  3}

  执行 vscode 命令

  1> Vetur: Generate grammar from vetur.grammar.customBlocks

使用

webpack 配置

在 weppack 配置文件中配置内容，以下为 vue.config.js 的配置信息

1// vue.config.js
2const ZAutoRoute = require('z-auto-route/lib/webpack-plugin')
3
4...
5  configureWebpack: (config) => {
6    config.plugins = [
7      ...config.plugins,
8      new ZAutoRoute({
9        pages: 'src/views', // 路由页面文件存放地址， 默认为'src/views'
10        importPrefix: '@/views/', // import引入页面文件的前缀目录，默认为'@/views/'
11      }),
12    ]
13  }
14...

路由文件配置

1// 路由初始化
2import Vue from 'vue'
3import VueRouter from 'vue-router'
4import routes from 'z-auto-route'
5
6Vue.use(VueRouter)
7
8const router = new VueRouter({
9  mode: 'history',
10  base: process.env.BASE_URL,
11  routes,
12})
13
14export default router

示例项目目录

|-- views
  |-- _layout.vue // 全局布局组件
  |-- homepage.vue // 首页
  |-- system // 系统管理
    |-- _layout.vue // 嵌套路由
    |-- role // 角色管理
      |-- index.vue
    |-- user // 用户管理
      |-- index
      |-- _id // 用户详情
        |-- index.vue

示例生成路由结构

1import _layout from '@/views/_layout.vue'
2function system__layout() {
3  return import(
4    /* webpackChunkName: "system-layout" */ '@/views/system/_layout.vue'
5  )
6}
7function system_role_index() {
8  return import(
9    /* webpackChunkName: "system-role-index" */ '@/views/system/role/index.vue'
10  )
11}
12function system_user_index() {
13  return import(
14    /* webpackChunkName: "system-user-index" */ '@/views/system/user/index.vue'
15  )
16}
17function system_user__id_index() {
18  return import(
19    /* webpackChunkName: "system-user-id-index" */ '@/views/system/user/_id/index.vue'
20  )
21}
22import homepage from '@/views/homepage.vue'
23
24export default [
25  {
26    name: 'layout',
27    path: '/',
28    component: _layout,
29    meta: {
30      title: '布局组件',
31      hide: true,
32    },
33    dynamic: false,
34    children: [
35      {
36        name: 'system-layout',
37        path: '/system',
38        component: system__layout,
39        meta: {
40          title: '系统管理',
41        },
42        sortIndex: 0,
43        children: [
44          {
45            name: 'system-role',
46            path: 'role',
47            component: system_role_index,
48            meta: {
49              title: '角色管理',
50            },
51          },
52          {
53            name: 'system-user',
54            path: 'user',
55            component: system_user_index,
56            meta: {
57              title: '用户管理',
58            },
59          },
60          {
61            name: 'system-user-id',
62            path: 'user/:id',
63            component: system_user__id_index,
64            meta: {
65              title: '用户详情',
66              hide: true,
67            },
68          },
69        ],
70      },
71      {
72        name: 'homepage',
73        path: '/homepage',
74        component: homepage,
75        meta: {
76          title: '首页',
77        },
78        dynamic: false,
79        sortIndex: -1,
80      },
81    ],
82  },
83]

效果图