element-ui左侧导航栏

效果图

image.png

安装

npm install element-ui -S

在main.js里引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Home.vue

<template>
  <div class="home">
    <div class="manage_page fillcontain">
      <el-row style="height: 100%;">
        <el-col :span="3" style="min-height: 100%;background-color: #324157;overflow: hidden;">
          <el-menu
            router
            :default-active="$route.name"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#049eff">
            <el-menu-item index="home"><i class="el-icon-menu"></i>首页</el-menu-item>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-document"></i>数据管理</template>
              <el-menu-item index="list">用户列表1</el-menu-item>
              <el-menu-item index="list2">用户列表2</el-menu-item>
              <el-menu-item index="list3">用户列表3</el-menu-item>
              <el-menu-item index="list4">用户列表4</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-document"></i>编辑</template>
              <el-menu-item index="index">编辑1</el-menu-item>
              <el-menu-item index="index2">编辑2</el-menu-item>
              <el-menu-item index="index3">编辑3</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
        <el-col :span="21">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  computed: {
    /*defaultActive: function () {
      /!*刷新后导航还是高亮显示且展开*!/ //或者直接$route.name
      //console.log(this.$route.path) /home/list  只取list就行 和el-menu-item的index对应
      return this.$route.path.replace('/home/', '');
    }*/
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    },
  }
}
</script>
<style lang="less" scoped>
.home, .fillcontain {
  height: 100%;
}
.el-menu {
  border: 0;
}
.el-col {
  background-color: #EFF2F7;
  height: 100%;
  overflow: auto;
}
.home {
  /deep/ .el-submenu .el-menu-item {
    background-color: #1f2d3d !important;
  }
  /deep/ .el-submenu__title:hover, .el-submenu .el-menu-item:hover {
    background-color: #48576a !important;
  }
}
</style>

路由

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: '/home',
    name: 'home',
    component: home,
    redirect: '/home/index',
    children: [
      {
        path: 'index',
        name: 'index',
        component: () => import('../views/index.vue'),
        meta: ['编辑', 'index'],
      },
      {
        path: 'list',
        name: 'list',
        component: () => import('../views/list.vue'),
        meta: ['数据管理', 'list'],
      },
    ]
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上方面包屑
在components里新建headTop

<template>
  <div class="header_container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
        <span v-if="index == $route.meta.length-1" class="no-redirect">{{ item }}</span>
        <a v-else href="javascript:;">{{ item }}</a>
        <!--<router-link v-else :to="{ name:item }">{{ item }}</router-link>-->
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!--<el-dropdown @command="handleCommand" menu-align='start'>
      <img :src="baseImgPath + adminInfo.avatar" class="avator">
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="home">首页</el-dropdown-item>
        <el-dropdown-item command="signout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>-->
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {
  },
  methods: {}
}
</script>

<style lang="less">
.header_container {
  background-color: #EFF2F7;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}
.no-redirect {
  color: #97a8be;
  cursor: text;
}
</style>

使用，在main.js里注册成全局组件

import headTop from './components/headTop.vue'
Vue.component('headTop',headTop)

页面使用

<head-top></head-top>

样式说明
要使导航和当前屏幕一样高，需要把html,body,#app,即所有的父元素的高都设置成100%