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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
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
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
不安全的常用的js写法
2009/09/15 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
Python扩展内置类型详解
2018/03/26 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
adidas美国官网:adidas US
2016/09/21 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
菜篮子工程实施方案
2014/03/08 职场文书
森林病虫害防治方案
2014/06/02 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
千手观音观后感
2015/06/03 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
《给予树》教学反思
2016/03/03 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python