vue+element-ui实现侧边菜单栏与标签页联动

使用vue+element-ui实现侧边栏菜单el-menu与el-tabs标签页联动效果

先看实现效果

实现思路

1. el-menu使用vue-router的模式，以index进行路由跳转，当前激活菜单:default-active="$route.path"，这样就会默认以当前路由路径高亮菜单选项，解决刷新等情况的高亮问题，主要代码

<el-menu:default-active="$route.path"class="el-menu-vertical-demo"
      background-color="#2f3640"
      text-color="#fff":style="{width:asideBarWidth}":width="asideBarWidth":collapse="$store.state.isCollapse":unique-opened="true":router="true"
      active-text-color="#409EFF"><menu-item v-for="item in menuData":key="item.path":item="item"/></el-menu>

2. el-tabs的:value(选中选项卡的name)也是由$route.path进行控制，el-tabs的数据结构是这样的：[{title: '首页',path: '/home',name: 'Home'}](vuex管理)，当点击的通过path进行路由跳转,删除时，如果是删除当前页，则需要获取下一个标签页的路径，再进行跳转。

<template><el-tabs type="card":value="$route.path"
    @tab-click="tabClick"
    closableclass="my-tabs"
    @edit="handleTabsEdit"><el-tab-pane:key="item.path"
      v-for="(item) in tabsValue":label="item.title":name="item.path"></el-tab-pane></el-tabs></template><script>import{ mapState}from'vuex'import{ setSessionTabsValue}from'@/utils/storage'exportdefault{
  name:'TabsNav',data(){return{}},created(){},
  watch:{},mounted(){// 监听刷新，将数据保存到sessionStorage里
    window.addEventListener('beforeunload',this.setStorage)},destroyed(){
    window.removeEventListener('beforeunload',this.setStorage)},
  computed:{...mapState({
      tabsValue: state=> state.tabsNav.tabsValue})},
  methods:{setStorage(){
      console.log('setStorage')setSessionTabsValue(this.tabsValue)},handleTabsEdit(targetPath, action){// 删除选项卡if(action==='remove'){if(targetPath==='/home')returnlet nextTab={}// 找到下一个路由this.tabsValue.forEach((item, index)=>{if(item.path=== targetPath){
            nextTab=this.tabsValue[index+1]||this.tabsValue[index-1]}})this.$store.commit('REMOVE_TABS_VALUE', targetPath)// 如果删除的是当前页，则进行跳转
        targetPath===this.$route.path&&this.$router.push(nextTab.path)}},tabClick({ name}){if(name===this.$route.path)returnthis.$router.push(name)}}}</script>

3. 使用vuex管理标签页的状态

import{
  getSessionTabsValue}from'@/utils/storage'// 初始化const initTabValue=getSessionTabsValue()||{
  tabsValue:[{
    title:'首页',
    path:'/home',
    name:'Home'}]}const tabsNav={
  state:()=>(initTabValue),
  mutations:{/**
     * 删除标签页
     * @param {*} state
     * @param {*} targetPath
     */REMOVE_TABS_VALUE(state, targetPath){
      state.tabsValue= state.tabsValue.filter(item=> item.path!== targetPath)},/**
     * 添加标签页，在MenuItem组件触发
     * @param {*} state
     * @param {*} data
     */ADD_TABS_VALUE(state, data){// 判断是否已经存在const isExist= state.tabsValue.some(item=> item.path=== data.path)// 如果不存在添加if(!isExist){
        state.tabsValue.push(data)}},/**
     * 初始化数据，在注销时调用，不然切换用户后还是旧标签数据
     * @param {*} state
     */RESET_TABS_VALUE(state){
      state= initTabValue}},
  actions:{},
  getters:{}}exportdefault tabsNav

4. 监听路由跳转，即路由跳转时，判断是否使用标签页管理，如果是，再判断当前路由是否已经加入tabsValue(在mutations的ADD_TABS_VALUE判断)

// 路由对象数据结构{
    path:'/home',
    name:'Home',
    component: Home,
    meta:{
      title:'首页',
      isTabsPage:true}}

router.beforeEach((to,from, next)=>{if(to.meta.title){// 如果设置标题，拦截后设置标题
    document.title= to.meta.title}if(to.path!=='/login'){if(!store.getters.isLogin){
      Message.error('请先登录')next('/login')return}// 判断是否需要添加到tabs标签if(to.meta.isTabsPage){const tabsItem={
        name: to.name,
        title: to.meta.title,
        path: to.path}
      store.commit('ADD_TABS_VALUE', tabsItem)}}next()})

5. 使用keep-alive对在标签页的页面进行缓存

<el-main><transition name="fade-transform" mode="out-in"><keep-alive:include="cachedViews"><router-view></router-view></keep-alive></transition></el-main>cachedViews(){returnthis.$store.state.tabsNav.tabsValue.map(item=> item.name)}

这样就实现了上面的效果，但是还有许多地方可以优化，并且耦合性有点高…