router-auto v1.3.4

vue auto plugin

描述

这是一款自动化基于webpack打包vue的一款自动化路由工具，解决大型项目多路由管理问题

效果

引用

const RouterAuto = require('router-auto')

module.exports = {
	entry: '...',
	output: {},
	module: {},
	plugin:[
		new RouterAuto()
	]
}

项目结构

需要在src目录下创建page目录，page目录作为页面目录，在page目录下创建任何目录，且目录名作为路由path和name，Index.vue作为页面入口，router.js作为额外配置选项meta等 实例如下

• package.json 等等文件与目录
• src 项目目录 - page 页面目录 - helloworld - Index.vue 页面入口 - hello.vue 业务组件 - router.js 额外配置 - demo - test - Index.vue 页面入口 - test.vue 业务组件 - Index.vue 页面入口

上面的目录结构生成的路由结构为

import Vue from 'vue'
import Router from 'vue-router'
  
Vue.use(Router)
  
export default new Router({
    mode:'history',
    base:'/auto/',
    routes:[{
      path: '/helloworld/index',
      name: 'helloworld',
      component: _ => import('@/page/helloworld/Index.vue')
    },{
      path: '/demo/index',
      name: 'demo',
      component: _ => import('@/page/demo/Index.vue')
    },{
      path: '/demo/test/index',
      name: 'demo_test',
      component: _ => import('@/page/demo/test/Index.vue')
    }]
})

打包流程

首先根据目录结构在src下生产一个.router.js文件作为路由入口，并且会根据main.js文件内容插入.router.js的引用,只有当page文件夹内创建xxx目录且创建Index.vue文件时才会创建路由，当在xxx目录内创建router.js时会将额外配置加入.router.js中

路由拦截和权限控制

当需要对路由做拦截或者权限时，请在main.js中对router做拦截操作，在将router注入到vue实例

初始化参数配置new RouterAuto(options = {})

router额外配置

xxx目录下的router.js文件配置

列入: hellowrold目录下router.js文件

export default {
  meta: {
    title: 'helloworld'
  },
  access: [1,2,3]
}

生成的.router.js文件

import Vue from 'vue' 
import Router from 'vue-router' 
  
Vue.use(Router)
  
export default new Router({
    mode:'history',
    base:'/auto/',
    routes:[{
      path: '/helloworld/index',
      name: 'helloworld',
      component: _ => import('@/page/helloworld/Index.vue'),
      meta:{title:'helloworld'},access:[1,2,3]
    }]
})

有任何问题请提issues或发送本人邮箱ngaiwe@126.com

• 博客
• 项目地址