vue+element使用el-menu编写公共导航

主要是以上这两个文件，left是左边导航文件，App.vue是把left这个导航组件引入到公共页面中来使用。

1.首先App.vue

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    	<el-container v-if="$route.meta.keepAlive">
		   <!--<el-header>   //头部导航
		    <keep-alive>
		     <header-nav></header-nav>
		    </keep-alive>
		   </el-header>-->
			  <el-container>
			  	<!--侧边导航-->
			   	<el-aside width="auto">   
				    <keep-alive>
                       <!-- 引入的组件页面-->  
				    	<left></left>   
				    </keep-alive>
			    </el-aside>
			  	<el-main>
			    <!-- 路由-->
			     	<router-view></router-view>   
			   	</el-main>
			  </el-container>
  		</el-container>
  </div>
</template>
<script>
import left from './components/left.vue';
export default {
  name: 'App',
  components: {
  	left: left
  },
}
</script>

2.再就是left.vue

<template>
	<div style="margin-top: 26px;height: calc(100% - 70px)">
		<el-radio-group size="mini" v-model="isCollapse" style="margin-bottom: 20px;">
			<el-radio-button :label="false">展开</el-radio-button>
			<el-radio-button :label="true">收起</el-radio-button>
		</el-radio-group>
		<el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
			<el-menu-item index="/index">   //这里的index就是设置为你的页面路由，点击跳转要用到
				<i class="el-icon-menu"></i>
				<span slot="title">管理1</span>
			</el-menu-item>
			<el-menu-item index="/supplier">
				<i class="el-icon-document"></i>
				<span slot="title">管理2</span>
			</el-menu-item>
			<el-menu-item index="3">
				<i class="el-icon-setting"></i>
				<span slot="title">导航四</span>
			</el-menu-item>
		</el-menu>
	</div>
</template>

<script>
export default {
    name: "left",
    data () {
		return {
			isCollapse: false
		}
	}, 
	methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: calc(100% - 25px)
 }
 .el-menu--collapse{
    width: 64px;
    height: calc(100% - 25px)
 }
</style>

注：这个一定要在el-menu中设置，才能跳转页面

:default-active="$route.path" router 一定要注意：不能少，否则会出现路由跳转了但是选中效果一刷新就没有了

3.最后是要去路由js里面设置

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import supplier from '@/components/supplier'
import left from '@/components/left'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      meta: {
		    keepAlive: true
		  }
    },
    {
      path: '/index',
      name: 'index',
      component: index,
      meta: {
		    keepAlive: true
		  }
    },
    {
      path: '/supplierManagement',
      name: 'supplierManagement',
      component: supplier,
      meta: {
    		keepAlive: true   //这个一定要设置，否则看不见页面，如果要登录页面没有导航则设置为false
   		}
    }
  ]
})

参考：

https://blog.csdn.net/qq_35393869/article/details/88077912

https://blog.csdn.net/Mr_EvanChen/article/details/80847724