vue自动化路由的实现代码
时间:2019-09-30
本文章向大家介绍vue自动化路由的实现代码,主要包括vue自动化路由的实现代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
目的
解放双手,从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时,无需多虑,router-auto是你的最优选择,它帮你解决路由的维护成本,你只需要创建相应的文件夹,路由就能动态生成,路由拦截你可以在main.js中去拦截他,总之比你想象的开发还要简单。
router-auto github地址有帮助的可以star一下
router-auto npm地址欢迎提issue实现效果
简要用法
具体用法请实时查看github或者npm,下面做一些简要用法介绍
引用
const RouterAuto = require('router-auto') module.exports = { entry: '...', output: {}, module: {}, plugin:[ new RouterAuto() ] }
项目结构
package.json 等等文件与目录
src 项目目录
- page 页面目录
- helloworld
- Index.vue 页面入口
- hello.vue 业务组件
- router.js 额外配置
- demo
- test
- Index.vue 页面入口
- test.vue 业务组件
- Index.vue 页面入口
- test
- home
- Index.vue 页面入口
- helloworld
上面的目录结构生成的路由结构为
import Vue from 'vue' import Router from 'vue-router' import helloworld from '@/page/helloworld/Index.vue' import demo from '@/page/demo/Index.vue' import demo_test from '@/page/demo/test/Index.vue' import home from '@/page/home/Index.vue' Vue.use(Router) export default new Router({ mode:'history', base:'/auto/', routes:[{ path: '/helloworld/index', name: 'helloworld', component: helloworld },{ path: '/demo/index', name: 'demo', component: demo },{ path: '/demo/test/index', name: 'demo_test', component: demo_test },{ path: '/home/index', name: 'home', component: home }] })
初始化参数配置new RouterAuto(options = {})
参数 | 说明 | 类型 | 默认值 | 必填项 |
---|---|---|---|---|
contentBase | 根目录即src平级目录 | String | 当前根目录process.cwd() | 否 |
mode | router中mode | String | history | 否 |
base | router中base | String | /auto/ | 否 |
watcher | 是否启用热更新(请在dev环境启用) | Boolean | false | 否 |
小缺陷
- 首先我们的项目不需要子路由,所以都是平铺路由,但是你可以文件夹中创建文件夹在用文件夹规划子路由,后续会升级几个版本加入进去,当然看看使用了和需求,伪需求都砍掉
- 现在生成的.router.js文件在磁盘中,作者以后进一步优化放到内存中,一步一个脚印,共创大好河山
- 然后就没缺陷了.... 希望提issue越多越好
本文参考与相关内容地址
邮箱 ngaiwe@126.com
github 进来单击star,作者给你么么哒!
issue 百因必有果,你的报应就是我
nuxt 源码参考
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法