脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 自动化路由

vue自动化路由的实现代码

 更新时间：2019年09月30日 08:26:03   作者：ngaiwe  
这篇文章主要介绍了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 源码参考

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

您可能感兴趣的文章:

相关文章

  • Vue生命周期与后端交互实现流程详解

    Vue生命周期与后端交互实现流程详解

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期
    2022-11-11
  • vue引入jq插件的实例讲解

    vue引入jq插件的实例讲解

    下面小编就为大家带来一篇vue引入jq插件的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue中的自定义指令clickOutside

    vue中的自定义指令clickOutside

    这篇文章主要介绍了vue中的自定义指令clickOutside，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • 解决vue-cli项目打包出现空白页和路径错误的问题

    解决vue-cli项目打包出现空白页和路径错误的问题

    今天小编就为大家分享一篇解决vue-cli项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3.2+Ts组件之间通信的实现

    Vue3.2+Ts组件之间通信的实现

    本文主要介绍了Vue3.2+Ts组件之间通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue中props值的传递详解

    vue中props值的传递详解

    这篇文章主要介绍了vue中props值的传递，在vue中父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染，这个正向的数据传递在vue组件中就是通过props来实现的，需要的朋友可以参考下
    2009-05-05
  • vue异步请求数据重新渲染方式

    vue异步请求数据重新渲染方式

    这篇文章主要介绍了vue异步请求数据重新渲染方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-01-01
  • vue项目中使用高德地图的超详细步骤

    vue项目中使用高德地图的超详细步骤

    在vue项目中添加高德地图,对开发地图的开发人员有一定帮助,下面这篇文章主要给大家介绍了关于vue项目中使用高德地图的超详细步骤,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue3 typescript封装axios过程示例

    vue3 typescript封装axios过程示例

    这篇文章主要为大家介绍了vue3 typescript封装axios过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • 详解vue-cli之webpack3构建全面提速优化

    详解vue-cli之webpack3构建全面提速优化

    这篇文章主要介绍了详解vue-cli之webpack3构建全面提速优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12

最新评论