浅入深出Vue之自动化路由

_getViews(dir) {
  let views = [];

  let keys = dir.keys();
  for (let index in keys) {
    let path = keys[index];
    let component = dir(path);
    views.push(View.create(path, component.default || component))
  }
  views = views.sort((x, y) => { return x.Deep > y.Deep "htmlcode">

/**
 * 解析views,生成对应的目录结构
 * @private
 */
_generateDirectory() {
  for (let index in this._views) {
    let view = this._views[index];
    this._directory.addView(view);
  }
}


addView 方法：


addView(view) {
  if(this.isCurrentDirectoryView(view)) {
    this._views.push(view);
  } else if(this._isInSubDirectory(view)) {
    this._addInSubDirectory(view);
  } else {
    let newSubDirectory = this._createSubDirectory(view);
    newSubDirectory.addView(view);
    this._subDirectory.push(newSubDirectory);
  }
}


对于目录还原时有三种可能：

  
这个文件就是当前目录下的文件
  
这个文件是当前目录下已有子目录的文件
  
这个文件是当前目录下子目录的文件，且为首次出现

将目录还原后，就可以根据目录生成对应的路由对象。并且在生成时可以做一些定制化的需求，比如开篇提出来的需求：

  
如果当前文件是 Layout.vue ，即默认为当前路由的根路由
  
如果当前文件是 Index.vue ， 即默认为当前层的空路由（根路由入口直接渲染）

使用方法，将 router.js 中的路由对象替换成自动生成的即可：


import Vue from 'vue'
import Router from 'vue-router'
import Generator from './routerGenerator/generator';

Vue.use(Router);

let generator = new Generator(require.context('./views', true, /\.vue$/));

export default new Router({
 routes: [generator.generate()]
})


目录结构如下：

效果如下：

github地址： https://github.com/WhileKing/ea-router
npm地址： https://www.npmjs.com/package/ea-router
npm包安装使用：


npm i ea-router



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