elementui后台系统遇到的问题（一）

记录使用elementui搭建后台管理系统中遇到的问题

---

1、当导航是三级路由时，三级路由对应的页面不会显示（需要引入中间过渡页面）

在router.js里面配置好相应的路径信息,注意此时在路由文件中要添加中间过渡页面，可以理解为，一级路由和三级路由中的桥梁
中间页面的布局

//simcard.vue
<template>
   <router-view></router-view>//这里作为过渡入口
</template>
<script>
export default {
    
}
</script>
<style>

</style>

router文件信息，

{
      path: '/',
      name: '运维管理',
      component: Home,
      children: [{
          path: '/',
          name: '工单管理',
          component: () => import('@/views/systemManage/systemManage/simcard.vue'),//引入对应的中间页
          children: [{
              path: '/mechanicOrder',
              component: mechanicOrder,
              name: '装机工单',
              meta:{
                // requireAuth:true,// 添加该字段，表示进入这个路由是需要登录的
              }
            },
            {
              path: '/dispatchOrder',
              component: dispatchOrder,
              name: '配送工单'
            },
            {
              path: '/maintainOrder',
              component: maintainOrder,
              name: '维修工单'
            },
            {
              path: '/leaveOrder',
              component: leaveOrder,
              name: '撤机工单'
            }
          ]
        },

//home.vue
<template>
<el-row>
    <el-col class="slide">
        <el-menu :default-active="$route.path" router @select="handleselect" background-color="#545c64" @open="handleOpen" @close="handleClose" text-color="#fff" active-text-color="#ffd04b">
            <template v-for="(item,index) in $router.options.routes">
                <el-submenu :index="index+'00'" :key='index' v-if='!item.hidden'>
                    <template slot="title">{{item.name}} </template>
                    <el-submenu :index="index+'0'" :key='index+"0"' v-for='(item,index) in item.children'>
                        <template slot='title'>{{item.name}}</template>
                        <el-menu-item class="menu-list" v-for="childs in item.children" :index="childs.path" :key="childs.path" route>{{childs.name}}</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <!-- <el-menu-item class="menu-list" v-if="item.leaf&&item.children.length>0" :index="item.children[0].path" :key='index'><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>  -->
            </template>
        </el-menu>
    </el-col>
    <el-col class="right">
         <transition name="fade" mode="out-in">
        <router-view></router-view>
    </transition>
    </el-col>
</el-row>
</template>

这时就会正确显示导航，以及点击做出相应页面的切换；

i.gif

---

2、当点击页面上导航菜单之外的区域，导航菜单会自动闭合，这是由于elementui版本问题，elementui的版本 要控制在2.4.11之上

//package.json
  "dependencies": {
    "element-ui": "^2.4.11",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },