用vue的elementui侧边栏写二级和三级路由

用vue的elementui侧边栏写二级和三级路由

有一种情况路由下的路径和名称是后端返回，前端可配置的
像这样：

 menuList:[
        {
            "createdBy": null,
            "createdDate": null,
            "updatedBy": null,
            "updatedDate": null,
            "id": "1",
            "name": "首页",
            "url": "/common/home",
            "type": 1,
            "parentId": 0,
            "parentName": null,
            "icon": "credits",
            "orderNum": 0,
            "children": null
        },
        {
            "createdBy": null,
            "createdDate": null,
            "updatedBy": null,
            "updatedDate": null,
            "id": "5",
            "name": "待办管理",
            "url": "",
            "type": 0,
            "parentId": 0,
            "parentName": null,
            "icon": "email",
            "orderNum": 1,
            "children": [
                {
                    "createdBy": null,
                    "createdDate": null,
                    "updatedBy": null,
                    "updatedDate": null,
                    "id": "6",
                    "name": "待办文件",
                    "url": "/pend/waitinfo",
                    "type": 1,
                    "parentId": 5,
                    "parentName": "待办管理",
                    "icon": "lock",
                    "orderNum": 0,
                    "children": null
                },
                {
                    "createdBy": null,
                    "createdDate": null,
                    "updatedBy": null,
                    "updatedDate": null,
                    "id": "7",
                    "name": "办文跟踪",
                    "url": "/pend/fllowinfo",
                    "type": 1,
                    "parentId": 5,
                    "parentName": "待办管理",
                    "icon": "time",
                    "orderNum": 1,
                    "children":null
                }]}]

那我们在router文件夹里面配置index.js的时候，也需要后端接口返回的。所有我们先尝试着写死

路由前端写死

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/main'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'Login',
      component: ()=>import('@/components/login')
    },
    {
      path: '',
      name: 'Main',
      component:Main,
      redirect:'/common/home',
      children:[
        {
          path: '/common/home',
          name: 'One',
          component: ()=>import('@/base/one/one'),
        },
      ]
    },
    {
      path: '',
      name: 'Main',
      component:Main,
      redirect:'/pend/waitinfo',
      children:[
          {
            path: '/pend/waitinfo',
            name: 'Two',
            component: ()=>import('@/base/two/two'),
          },
          {
            path: '/pend/fllowinfo',
            name: 'Three',
            component: ()=>import('@/base/three/three'),
          }
      ]
    }
  ]
})

注意：这里的path和后端返回的url的区别在于多了一个斜杠/，所以后面配置的画需要注意。

后面跳转页面的时候，就指向item的url就行了

<template>
  <div class="menuSun" >
    <el-submenu v-if="item.children&&item.children.length>0" :key="item.id" :index="item.id">
      <template slot="title">
        <svg-icon :icon-class="item.icon"></svg-icon>
        <span slot="title" v-if="!isCollapse">{{item.name}}</span>
      </template>
      <menuSun :collapse="isCollapse" v-for="(it,id) in item.children" :key="id" :item="it"></menuSun>
    </el-submenu>
    
    <el-menu-item v-if="!item.children" :key="item.id" :index="item.id" @click="pushMenu(item)">
      <svg-icon :icon-class="item.icon"></svg-icon>
      <span slot="title">{{item.name}}</span>
    </el-menu-item>
  </div>
</template>

<script>
import menuSun from '@/components/menuSun'
export default {
  name: 'menuSun',
  props:{
      isCollapse:{
        type:Boolean,
        required:false
      },
      item:{
        type:Object,
        required:false
      }
  },
  components:{
    menuSun
  },
  data(){
    return{
    }
  },
  methods:{
    pushMenu(item){
      console.log(item.url)//这里打印出来的就是后端返回的url
      this.$router.push({path:item.url})
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created(){
  }
}
</script>

<style lang="less">
.menuSun {
    height: 100%;
    .el-menu{
      border: rgb(84, 92, 100);
    }
    .el-submenu{
      min-width: auto!important;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
    }
}
</style>

另外一种方法下次再讲。