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 页面入口
    • 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源码参考

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 自动化路由实现代码

    1.需求描述 在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由.为此我们在项目中会专门的一个文件夹来管理路由,如下图所示 那么有没有一种方案,能够实现我们在文件夹中新建了一个vue文件,就自动帮我们添加路由.特别在我们的一个ERP后台项目中,我们几乎都是一个文件夹下有很多子文件,子文件中一般包含index.vue, detail.vue, edit.vue,分别对应的事列表页,详情页和编辑页. 上图是我们的文件目录,views文件夹中存放的是所有的页面,goodsPlanni

  • 浅入深出Vue之自动化路由

    在软件开发的过程中,"自动化"这个词出现的频率是比较高的. 自动化测试 , 自动化数据映射 以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些 重复 . 千篇一律 的事情.人们总是想让它自己完成,来解放我们的双手. "懒惰"是进步的动力 为什么要自动化路由 路由自动化在于解决以下的问题: 每次新建页面时的重复操作:在路由文件中添加对应的路由对象. 路由与代码耦合:路由依赖于路由对象的硬编码,当某一路由发生变动时,势必需要修改对应的路由对象.当

  • vue自动化路由的实现代码

    目的 解放双手,从此不用配置路由.当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时,无需多虑,router-auto是你的最优选择,它帮你解决路由的维护成本,你只需要创建相应的文件夹,路由就能动态生成,路由拦截你可以在main.js中去拦截他,总之比你想象的开发还要简单. router-auto github地址有帮助的可以star一下 router-auto npm地址欢迎提issue实现效果 简要用法 具体用法请实时查看github或者npm,下面做一些简要用法介绍 引用

  • VUE多层路由嵌套实现代码

    VUE多层路由嵌套实现代码

    先看看效果图: 例如:在做系统时,主页面有两个功能[home]and[news],在[home]下又分为登录和注册. 首先需要将各种模板进行抽离.定义模板 <template id="home"> //home模板,里面含子视口 <div> <router-link to="/home/login">登录</router-link> <router-link to="/home/zhuce"&

  • Spring Boot/VUE中路由传递参数的实现代码

    在路由时传递参数,一般有两种形式,一种是拼接在url地址中,另一种是查询参数.如:http://localhost:8080/router/tang/101?type=spor&num=12.下面根据代码看一下,VUE 和 Spring Boot 中各自是如何处理传递和接受参数的. Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestContro

  • Vue三层嵌套路由的示例代码

    Vue三层嵌套路由的示例代码

    Vue嵌套路由: 实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染): Demo访问时路径:http://IP:端口/#/routers/ 1.建立案例文件夹 page/routers/ 1 routers/index.vue <template> <div> <router-link :to="{name: 'rindex_rhome'}" class="rlink&

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • Vue路由守卫案例代码

    目录 Vue路由守卫 全局路由守卫 全局前置守卫 全局后置守卫 实例代码: 独享守卫 组件内守卫 总结 Vue路由守卫 路由守卫,简单理解来说就是,当用户要进行一些操作时,我需要用户的一些信息或数据或行为,我判断过后,才会同意用户进行操作,说到这里,我想大家心里都或多或少有点理解了吧,官方一点的解释就是进行操作的鉴权,当操作与之条件匹配时,操作成功,当操作与之不匹配时,操作终止,作用就是是对路由进行权限控制. 在Vue中,路由守卫分为三种:全局路由守卫.独享路由守卫以及组件内路由守卫 全局路由守

  • 浅析Vue中拆分视图层代码的5点建议

    一.框架的定位 框架通常只是一种设计模式的实现,它并不意味着你可以在开发中避免所有分层设计工作. SPA 框架几乎都是基于 MVC 或 MVVM 设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多.许多企业内部的项目仍然在使用 angularjs1.X ,你会发现许多 controller 的体积大到令人发指,稍有经验的团队会利用好 angularjs1 构建的 controller , service , filter 以及路由和消息机制来完

  • vue动态路由实现多级嵌套面包屑的思路与方法

    前言 最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a:/b/03:/bdetail/0

随机推荐