vue自动化路由的实现代码


Posted in Javascript onSeptember 30, 2019

目的

解放双手,从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时,无需多虑,router-auto是你的最优选择,它帮你解决路由的维护成本,你只需要创建相应的文件夹,路由就能动态生成,路由拦截你可以在main.js中去拦截他,总之比你想象的开发还要简单。

router-auto github地址有帮助的可以star一下

router-auto npm地址欢迎提issue实现效果

vue自动化路由的实现代码

简要用法

具体用法请实时查看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 页面入口
    • home
      • Index.vue 页面入口

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

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 相关文章推荐
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
js自制图片放大镜功能
Jan 24 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
jQuery实现日历效果
Sep 11 jQuery
js实现图片上传即时显示效果
Sep 30 #Javascript
vue实现select下拉显示隐藏功能
Sep 30 #Javascript
createObjectURL方法实现本地图片预览
Sep 30 #Javascript
微信小程序实现分享商品海报功能
Sep 30 #Javascript
Bootstrap实现模态框效果
Sep 30 #Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 #Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 #Javascript
You might like
我的论坛源代码(二)
2006/10/09 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
PHP CURL使用详解
2019/03/21 PHP
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python学习笔记之if语句的使用示例
2017/10/23 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Python 读取位于包中的数据文件
2020/08/07 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
python套接字socket通信
2022/04/01 Python
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android