封装一个侧边栏导航

components中新建一个siderBar.vue文件

<!-- eslint-disable no-unused-vars -->

<template>
	<div class="sidebar_wrap">
		<div class="wrap_title">
      <img src="@/assets/images/logo.png" alt />
      <div>管理平台</div>
    </div>
		<div class="wrap_catalog">
			<el-menu :default-active="'/'+navActive" :router="isRouter" mode="vertical" ref="menu">
				<!-- 一级菜单 -->
				<template v-for="(item,index) in navData">
					<el-submenu v-if="item.children && item.children.length" :index="item.router" :key="index"
						ref="elMenu" class="list_one" @open="open">
						<template slot="title">
							<div @click="clickStatus($event,item)">
								<!-- <img :src="require('../assets/images/'  +item.icon_none + '.png')" class="imgs1"
									v-if="item.status === '0'" /> -->
								<span>{{item.name}}</span>
							</div>
						</template>
						<!-- 二级菜单 -->
						<template v-for="itemChild in item.children">
							<el-menu-item :index="itemChild.router" :key="itemChild.router">
								<span slot="title" class='submenu'>{{itemChild.name}}</span>
							</el-menu-item>
						</template>
					</el-submenu>
					<el-menu-item v-else :index="item.router" :key="item.router" @open="open" ref="elMenu"
						class="list_two">
						<div @click="clickStatus($event,item)">
							<!-- <img :src="require('../assets/images/'  +item.icon_none + '.png')" class="imgs1"
								v-if="item.status === '0'" /> -->
							<span slot="title">{{item.name}}</span>
 
						</div>
					</el-menu-item>
				</template>
			</el-menu>
		</div>
 
	</div>
</template>
<script>
	import {menusList} from '../assets/js/menusList'
	export default {
		name: "sideBar",
		data() {
			return {
				isUnique: true,
				isRouter: true,
				navData: [],
				navActive: "",
			};
		},
		beforeMount() {
			this.getActiveNav();
		},
		watch: {
			//监听路由变化
			$route(index) {
				// console.log('sideBarRouter',index)
				let path = index.path.substr(1);
				this.handleSelect(path);
			},
		},
		created() {
		
		},
		mounted() {
            this.navData = menusList.list
		},
		methods: {
			getActiveNav() {
				let currentUrl = window.location.href;
				this.navActive = currentUrl.split("/").pop();
			},
			//监听路由的变化，对应菜单高亮显示
			handleSelect(index) {
				this.navActive = index;
			},
			// eslint-disable-next-line no-unused-vars
			clickStatus(e, item) {
				// console.log(e,item)
				// console.log(this.$refs.elMenu)
				// this.$refs.elMenu.map((item1) => {
				//   console.log(item1.$el)
				//   // if(item1.active === false){
 
				//   // }
				// })
			},
			open() {
				// console.log("1");
			},
		},
	};
</script>
<style scoped lang="scss">
	.sidebar_wrap {
		width: 200px;
		height: 100%;
		// background: #870000;
		background: #20222A;
		overflow-y: auto;
		overflow-x: hidden;
 
		.wrap_title {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 12px;
			color: #20222A;
			height: 60px;
 
			img {
				width: 40px;
				height: 40px;
				margin-right: 5px;
			}
		}
 
		.wrap_catalog {
			/deep/ .el-menu {
				border-right: none;
				// background-color: #870000;
				background-color: #20222A;
				width: 200px;
				color: #fff;
				li {
					padding: 0 !important;
				}
 
				.el-menu-item {
					height: 30px;
					line-height: 30px;
					font-size: 12px;
					color: #fff;
					
				}
 
				.el-submenu__title {
					height:30px;
					line-height: 30px;
					font-size: 11px;
					color: #fff;
				
				}
 
				.el-submenu__icon-arrow {
					display: none;
				}
 
				.el-menu-item.is-active {
					width: 200px;
					height: 030px;
					color: #FFFFFF;
					padding-left: 5px;
					background-color: #338fe5;
			
				}
 
				.el-menu-item:hover {
					// background: #B40024;
					background-color: #082f53;
					color: #fff;
				}
 
				.el-submenu.is-active.is-opened {
					// background: #B40024;
					background-color: #082f53;
					color: #fff;
 
					.el-menu-item.is-active {
						// background: #A20A1E;
						background-color: #338fe5;
						color: #fff;
					}
 
					.el-menu-item:hover {
						// background: #A20A1E;
						// background-color: #082f53;
					color: #fff;
					}
				}
 
				.el-submenu:hover {
					.el-menu-item:hover {
						// background: #A20A1E;
						// background-color: #082f53;
				     	color: #fff;
					}
				}
 
				.el-submenu__title:hover {
					// background: #B40024;
					background-color: #082f53;
					color: #fff;
 
					.el-menu-item:hover {
						// background: #A20A1E;
						background-color: #082f53;
					}
				}
 
				.el-submenu.is-opened:hover {
					// background: #B40024;
					// background-color: #082f53;
					color: #fff;
 
					// .el-menu-item:hover {
					// 	// background-color: #082f53;
	
					// }
				}
 
				.imgs1 {
					width: 10px;
					height: 10pxm;
					margin-right: 3px;
				}
 
				.submenu {
					font-family: 'PingFang-Regular';
				}
			}
 
			// .list_one:last-child {

			// 	/deep/ .el-menu-item:last-child {
				
			// 	}
			// }
 
			// .list_two:last-child {
				
			// }
		}
	}
</style>

将导航文件抽取出来便于管理
目录数据结构

export const menusList = {
	"list": [
        {
            "name": "健康测评",
            "name_en": "teacherHome",
            "router": "/table",
            "icon_name": "shouye",
            "children": [],
        },{
			"name": "在线研修",
			"name_en": "autonomouslyStudy",
			"router": "/autonomouslyStudy",
			"icon_name": "shouye",
			"children": [
                {
                    "name": "自主学习",
                    "name_en": "autonomouslyStudy",
                    "router": "/autonomouslyStudy",
                    "icon_name": "shouye",
                    "children": [],
                },
                {
                    "name": "在线阅读",
                    "name_en": "onlineReading",
                    "router": "/onlineReading",
                    "icon_name": "shouye",
                    "children": [],
                }
            ],
        }, {
            "name": "3D图形",
            "name_en": "canvas3d",
            "router": "/canvas3d",
            "icon_name": "shouye",
            "children": [],
        }
	]
}

在router 文件夹中配置index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/home'
import Table from '../views/table'
import AutonomouslyStudy from '../views/autonomouslyStudy'
import OnlineReading from '../views/onlineReading'
Vue.use(Router)

export const constantRoutes = [
  { path: '/', redirect: '/home' },
  {
    path: '/home',
    name: 'homePage',
    component: Home,
    children:
      [
        {
          path: "/table",
          name: "tablePage",
          component: Table,
          meta: {
            title: "表格"
          }
        },
        {
          path: "/autonomouslyStudy",
          name: "autonomouslyStudy",
          component: AutonomouslyStudy,
          meta: {
            title: "自主学习"
          }
        },
        {
          path: "/onlineReading",
          name: "onlineReading",
          component: OnlineReading,
          meta: {
            title: "在线阅读"
          }
        },
      
      ]
  }
]



const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

将sidebar添加到home文件中，就可以使用了