z-auto-route
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

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

安装

npm 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

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

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

注意

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

  • 暂时只支持metadynamic两个设置项。

  • 如果需要z-route标签高亮,可以设置 vs-codesettings.json

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

    执行 vscode 命令

    > Vetur: Generate grammar from vetur.grammar.customBlocks

使用

webpack 配置

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

// vue.config.js
const ZAutoRoute = require('z-auto-route/lib/webpack-plugin')
 
...
  configureWebpack: (config) => {
    config.plugins = [
      ...config.plugins,
      new ZAutoRoute({
        pages: 'src/views', // 路由页面文件存放地址, 默认为'src/views'
        importPrefix: '@/views/', // import引入页面文件的前缀目录,默认为'@/views/'
      }),
    ]
  }
...

路由文件配置

// 路由初始化
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from 'z-auto-route'
 
Vue.use(VueRouter)
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})
 
export default router

示例项目目录

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

示例生成路由结构

import _layout from '@/views/_layout.vue'
function system__layout() {
  return import(
    /* webpackChunkName: "system-layout" */ '@/views/system/_layout.vue'
  )
}
function system_role_index() {
  return import(
    /* webpackChunkName: "system-role-index" */ '@/views/system/role/index.vue'
  )
}
function system_user_index() {
  return import(
    /* webpackChunkName: "system-user-index" */ '@/views/system/user/index.vue'
  )
}
function system_user__id_index() {
  return import(
    /* webpackChunkName: "system-user-id-index" */ '@/views/system/user/_id/index.vue'
  )
}
import homepage from '@/views/homepage.vue'
 
export default [
  {
    name: 'layout',
    path: '/',
    component: _layout,
    meta: {
      title: '布局组件',
      hide: true,
    },
    dynamic: false,
    children: [
      {
        name: 'system-layout',
        path: '/system',
        component: system__layout,
        meta: {
          title: '系统管理',
        },
        sortIndex: 0,
        children: [
          {
            name: 'system-role',
            path: 'role',
            component: system_role_index,
            meta: {
              title: '角色管理',
            },
          },
          {
            name: 'system-user',
            path: 'user',
            component: system_user_index,
            meta: {
              title: '用户管理',
            },
          },
          {
            name: 'system-user-id',
            path: 'user/:id',
            component: system_user__id_index,
            meta: {
              title: '用户详情',
              hide: true,
            },
          },
        ],
      },
      {
        name: 'homepage',
        path: '/homepage',
        component: homepage,
        meta: {
          title: '首页',
        },
        dynamic: false,
        sortIndex: -1,
      },
    ],
  },
]

效果图

image image

Dependents (0)

Package Sidebar

Install

npm i z-auto-route

Weekly Downloads

10

Version

1.0.7

License

ISC

Unpacked Size

22.2 kB

Total Files

13

Last publish

Collaborators

  • zhicaizhu