vue之按需加载组件

软件版本

vue 2.* 对我还在用vue2

需求

服务器端返回访问授权信息，拿到服务器授权后，按服务器结果动态加载所需组件。

解决方法

• 利用vue的keep-alive和component 实现可访问页面的展示。文档地址
• 其中有一个重要的环节是要将许可访问的组件给到页面的components

export default {
  name: 'HomeView',
  components:  {},//许可访问组件要给到这来
  data(){
  	return {}；
  }
}

最开始我使用的是如下方式引入：

import AaaaView from '@/views/AaaaView .vue';

不合理，每增一个权限就要在页面手动增加一次引入，麻烦。直到看到其他的大佬使用require.context() 解决了我的麻烦事情。

// 前文还做了权限信息请求等工作【功能的请求 需要同步】
// require.context 的使用描述：https://v2.cn.vuejs.org/v2/guide/components-registration.html
const cptAll = require.context('@/views',true,/\.vue$/);
let reqiure_cpts = {};

  cptAll.keys().forEach(fileName => {
    // console.log('fileName:', fileName);
    let component = cptAll(fileName)
    let c_name = fileName.replace(/^\.\/(.*)\.\w+$/, '$1');
    // 多层级目录，取最后的文件名（此是根据个人项目和文件名等相关设置来操作的），因为多层目录
    // c_name 的结果会是 path1/path2/path2,此时vue 会报错说组件名不符合H5自定义标签要求。
    if (c_name.indexOf('/') != -1) {
      let nameArr = c_name.split('/');
      c_name = nameArr[nameArr.length -1];
    }
    // component.default 返回该组件上下文内容请求
    //if (func.indexOf(c_name) != -1) { // 如果该组件名存在于授权中
      reqiure_cpts[c_name] = component.default;
    //}
  })


export default {
  name: 'HomeView',
  components:  reqiure_cpts,//许可访问组件要给到这来
  data(){
  	return {}；
  }
}

• 许可访问的导航 我使用的是 element的el-menu。
  前期先生成好navigation的数据

         <component
            class="menu-item"
            v-for="(item, index) in navigation"
            :key="index"
            :index="`0|${index}`"
            :is="item.children.length>0 ? `el-submenu` : `el-menu-item`"
          >
            <template slot="title">
              <i class="" :class="[item.icon?`${item.icon}`:``]">i>
              {{item.title}}
            template>
            <template v-if="item.children&&item.children.length>0">
              <el-menu-item class="menu-item"
                v-for="(item2,i) in item.children"
                :key="i"
                :index="`${index}|${i}`"
              >
              {{item2.title}}
              el-menu-item>
            template>
          component>

END