vue+element-ui实现侧边栏菜单

asideNav.vue组件中的代码：

<template>
  <!--collapse 是否水平折叠收起菜单-->
  <el-menu    
    :default-active="$route.path"
    router
    unique-opened    
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <!--是否水平折叠收起菜单 会影响这里字段的显示 -->
    <!-- <h3 v-show="isCollapse">偶囧</h3> -->
    <!-- <h3 v-show="!isCollapse">偶囧后台管理系统</h3> -->
    <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
    <el-submenu :index="item.label" v-for="(item, index) in hasChildren" :key="index">
      <template slot="title">
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{ item.label }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="clickMenu(subItem)">
          <i :class="'el-icon-' + subItem.icon"></i>
          <span slot="title">{{ subItem.label }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {  
  //计算属性
  computed: {
    //没有子菜单
    noChildren() {
      return this.menu.filter(item => !item.children)
    },
    //有子菜单 (这样设置会有一个问题 就是有子菜单的 永远会在没有子菜单的下面）
    hasChildren() {
      return this.menu.filter(item => item.children)
    },
    // isCollapse() {
    //   // 这里的数据就是从vuex取得
    //   return this.$store.state.tab.isCollapse
    // }
  },
  data() {
    return {
      menu: [
        {
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
        //   url: 'UserManage/UserManage'
        },
        {
          label: '设备',
          icon: 'location',
          children: [
            {
              path: '/equipmentList',
              name: 'equipmentList',
              label: '设备列表',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path: '/equipmentClass',
              name: 'equipmentClass',
              label: '设备类别',
              icon: 'setting',
              url: 'Other/PageTwo'
            },
             {
              path: '/test',
              name: 'test',
              label: '测试',
              icon: 'setting',
              url: 'Other/PageTwo'
            }
          ]
        },
        {
          label: '设备2',
          icon: 'location',
          children: [
            {
              path: '/page1',
              name: 'page1',
              label: '设备列表',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path: '/page2',
              name: 'page1',
              label: '设备类别',
              icon: 'setting',
              url: 'Other/PageTwo'
            },
             {
              path: '/page3',
              name: 'page3',
              label: '测试',
              icon: 'setting',
              url: 'Other/PageTwo'
            }
          ]
        }
      ]
    }
  },
  methods: {
    //跳转路由 根据名称跳转
    clickMenu(item) {
      // this.$router.push({ name: item.name })
    }
  }
}
</script>

home.vue中的代码：

<template>
  <div class="app">
    <el-container style="height: 100%">
      <el-header>Header</el-header>
      <el-container>
        <el-aside maxWidth="150">
          <Aside></Aside>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import Aside from "@/components/asideNav.vue";

export default {
  name: "Home",
  components: {
    Aside,
  },
};
</script>

router index.js中的代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const routes = [
  {
    path: '/login',
    name: 'login',    
    component: () => import('../components/equipment/equipmentList')
  },
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [      
      {      
        path: '/user',
        name: 'user',        
        component: () => import('../components/equipment/user')
      },
      {      
        path: '/equipmentList',
        name: 'equipmentList',
        
        component: () => import('../components/equipment/equipmentList')
      },
      {      
        path: '/equipmentClass',
        name: 'equipmentClass',
        
        component: () => import('../components/equipment/equipmentClass')
      },
      {      
        path: '/test',
        name: 'test',
        
        component: () => import('../components/equipment/test')
      }
    ]
  },
  
]

const router = new VueRouter({
  routes
})

export default router