您的位置：首页 > Web前端 > Vue.js

vue自动化路由的实现代码

2019-10-11 18:07 1276 查看

目的

解放双手，从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时，无需多虑，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 自动化路由
    相关文章推荐
    新的分享
    章节导航