沈阳网站制作-vue自动化路由
发布时间:2019-10-02 来源: 未知 返回栏目

目的

解放双手,从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时,无需多虑,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 源码参考

作者:ngaiwe
链接:https://juejin.im/post/5d90798151882576e44088e8
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


上一篇:前端新手不要慌! 给你✊救命稻草

下一篇:MongoDB 安装和启动方法