Element -UI侧边导航跳转 + 路由拆分

https://element.eleme.cn/#/zh-CN/component/menu

<el-aside :width="isCollapse ? '65px':'200px'">
        <div class="toggleBtn" @click="toggle">|||</div>
        <el-menu
            :collapse="isCollapse"
            :collapse-transition="false"
            default-active="2"
            :unique-opened="true"
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="true"
        >
          <el-submenu v-for="(item,index) in list" :index="item.id+''" :key="index">
            <template slot="title">
              <i :class="'icon-'+icon[index]"></i>
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="'#icon-'+icon[index]"></use>
              </svg>
              <span>{{ item.authName }}</span>
            </template>
            <el-menu-item-group v-for="i in item.children" :key="i.id">
              <el-menu-item
                  :key="i.id+''"
                  :index="i.path"
                 >
                {{ i.authName }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

<el-menu-item
    :key="i.id+''"
    :index="i.path"
   >
  {{ i.authName }}
</el-menu-item>

主要的一块 element 的组件 index绑定后 可以 根据后台 发送过来的数据 创建响应的路由 进行固定跳转

子路由

导入子级路由