vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码

<style lang="less" scoped>@import "./base.less";.tags-nav {  display: flex;  align-items: stretch;  height: 40px;  padding: 2px 0;  background-color: @background-color;  a {    margin-right: 1px;    width: 24px;  }  a:hover {    color: @light-theme-color;  }  a:first-of-type {    margin-right: 4px;  }  a,  .dropdown-btn {    display: inline-block;    width:30px;    height: 36px;    color: @title-color;    background-color: @white;    text-align: center;    line-height: 36px;    position: relative;    z-index: 10;  }  .tags-wrapper {    flex: 1 1 auto;    position: relative;    .tags-wrapper-scroll {      position: absolute;      top: 0px;      left: 0;      z-index: 5;      height: 36px;      overflow: visible;      white-space: nowrap;      transition: all .3s ease-in-out;      .tag {        flex-shrink: 0;        cursor: pointer;      }    }  }}</style><template>  <div class="tags-nav">    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="handleScroll('left')">      <icon name="angle-left"></icon>    </a>    <div class="tags-wrapper" ref="tagsWrapper">      <div class="tags-wrapper-scroll" ref="tagsWrapperScroll" :style="{ left: leftOffset + 'px' }">        <transition-group name="slide-fade">          <el-tag            class="tag slide-fade-item"            ref="tagsPageOpened"            v-for="(tag, index) in pageOpenedList"            :key="'tag_' + index"            :type="tag.selected ? '': 'info'"            :closable="tag.name!='basicDevice'"            :id="tag.name"            effect="dark"            :text="tag.name"            @close="closeTag(index, $event, tag.name)"            @click="tagSelected(index)"          >{{tag.title}}</el-tag>        </transition-group>      </div>    </div>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="handleScroll('right')">      <icon name="angle-right"></icon>    </a>    <!-- <el-dropdown class="dropdown-btn" @command="closeTags">      <span class="el-dropdown-link">        <icon name="angle-down"></icon>      </span>      <el-dropdown-menu slot="dropdown">        <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>        <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>      </el-dropdown-menu>    </el-dropdown> -->    <!-- <Dropdown  placement="bottom-end" @on-click="closeTags">      <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="margin-right: 0;">        <icon name="angle-down"></icon>      </a>      <DropdownMenu slot="list">        <DropdownItem name="closeOthers">关闭其他</DropdownItem>        <DropdownItem name="closeAll">关闭所有</DropdownItem>      </DropdownMenu>    </Dropdown> -->  </div></template><script>export default {  data () {    return {      currentPageName: this.$route.name,      leftOffset: 0    }  },  props: {    pageOpenedList: {      type: Array    }  },  methods: {    closeTags (action) {      this.$emit('closeTags', action)      if (action === 'closeOthers') {        this.leftOffset = 0      }    },    closeTag (index, event, name) {      // 移除单个tag，且首页的tag无法移除      if (index !== 0) {        this.$emit('closeTags', index,name)      }      if (this.currentPageName !== name) {        this.leftOffset = Math.min(0, this.leftOffset + event.target.parentNode.offsetWidth)      }    },    tagSelected (index) {      this.$emit('tagSelected', index)    },    checkTagIsVisible (tag) {      let visible = {        isVisible: false,        position: 'left'      }      const leftDiffValue = tag.offsetLeft + this.leftOffset      if (leftDiffValue < 0) {        return visible      }      const rightDiffValue = this.$refs.tagsWrapper.offsetWidth - this.leftOffset - tag.offsetWidth - tag.offsetLeft      if (leftDiffValue >= 0 && rightDiffValue >= 0) {        visible.isVisible = true      } else {        visible.position = 'right'      }      return visible    },    handleScroll (direaction) {      // 获取在可视区域临界的tag      let criticalTag = this.getCriticalTag(direaction)      switch (direaction) {        case 'left':          this.leftOffset = Math.min(this.$refs.tagsWrapper.offsetWidth - criticalTag.$el.offsetLeft, 0)          break        case 'right':          const diffValue1 = -(criticalTag.$el.offsetLeft + criticalTag.$el.clientWidth)          const diffvalue2 = -(this.$refs.tagsWrapperScroll.offsetWidth - this.$refs.tagsWrapper.offsetWidth)          this.leftOffset = Math.max(diffValue1, diffvalue2)          break        default:          break      }    },    getCriticalTag (direaction) {      let criticalTag      const refsTagList = this.$refs.tagsPageOpened      for (let tag of refsTagList) {        // 检查tag是否在可视区        if (this.checkTagIsVisible(tag.$el).isVisible) {          criticalTag = tag          if (direaction === 'left') {            break          }        }      }      return criticalTag    },    setTagsWrapperScrollPosition (tag) {      const visible = this.checkTagIsVisible(tag)      if (!visible.isVisible && visible.position === 'left') {        // 标签位于可视区域的左侧        this.leftOffset = -tag.offsetLeft      } else {        // 标签位于可视区域的右侧 or 可视区域        this.leftOffset = Math.min(0, -(tag.offsetWidth + tag.offsetLeft - this.$refs.tagsWrapper.offsetWidth + 4))      }    }  },  mounted () {    // 初始化当前打开页面的标签位置    const refsTag = this.$refs.tagsPageOpened    setTimeout(() => {      for (const tag of refsTag) {        if (tag.text === this.$route.name) {          const tagNode = tag.$el          this.setTagsWrapperScrollPosition(tagNode)          break        }      }    }, 1)  },  watch: {    $route (to) {      this.currentPageName = to.name      this.$nextTick(() => {        const refsTag = this.$refs.tagsPageOpened        for (const tag of refsTag) {          if (tag.text === this.$route.name) {            const tagNode = tag.$el            this.setTagsWrapperScrollPosition(tagNode)            break          }        }      })    }  }}</script>

// color@theme1-color: #515a6e;@theme-color: #2d8cf0;@light-theme-color: #5cadff;@dark-theme-color: #2b85e4;@info-color: #2db7f5;@success-color: #19be6b;@warning-color: #ff9900;@error-color: #ed4014;@title-color: #17233d;@content-color: #515a6e;@sub-color: #808695;@disabled-color: #c5c8ce;@border-color: #dcdee2;@divider-color: #e8eaec;@background-color: #f8f8f9;@white: white;// 间距@padding: 16px;// 默认样式* {  box-sizing: border-box;}a {  color: @theme-color;}a:hover {  color: @light-theme-color;}.dark-a {  color: @title-color;}// 清除float.clear-float::after {  display: block;  clear: both;  content: "";  visibility: hidden;  height: 0;}// 动画.slide-fade-item {  transition: all 0.1s ease-in-out;  display: inline-block;}.slide-fade-enter, .slide-fade-leave-to/* .list-complete-leave-active for below version 2.1.8 */ {  opacity: 0;  transform: translateX(-10px);}// 滚动条样式.menu-scrollbar::-webkit-scrollbar,.common-scrollbar::-webkit-scrollbar {  /*滚动条整体样式*/  width: 11px;  /*高宽分别对应横竖滚动条的尺寸*/  height: 1px;}// 滚动条样式1.menu-scrollbar::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/  border-radius: 2px;  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);  background: @sub-color;}// 滚动条样式2.common-scrollbar::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/  border-radius: 2px;  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);  background: @border-color;}

{        path: 'auditManage',        name: 'auditManage',        meta:{title:'审计管理'},        component: function (resolve) {          require(['../page/sysConfig/audit/auditManageMain.vue'], resolve);        },        redirect: '/main/auditManage/trendStatistics',        children: [{          path: 'trendStatistics',          name: 'trendStatistics',          meta:{title:'趋势审计'},          component: function (resolve) {            require(['../page/sysConfig/audit/auditTrendStatisticsList.vue'], resolve);          }        }, {          path: 'search',          name: 'search',          meta:{title:'审计查询'},          component: function (resolve) {            require(['../page/sysConfig/audit/auditSearchList.vue'], resolve);          }        },

[setPageOpenedList](state,params = null){        // 设置前先读取本地保存的打开列表数据      state.pageOpenedList = sessionStorage.pageOpenedList      ? JSON.parse(sessionStorage.pageOpenedList) : [{        title: '基础设施',        name: 'basicDevice',        selected: true      }]    if (!params) {      return    }    if (params.index === -1) {      // 新打开一个页面      state.pageOpenedList.push({        title: params.route.meta.title,        name: params.route.name,        selected: false      })      params.index = state.pageOpenedList.length - 1    }    // 更新selected值    for (let i = 0; i < state.pageOpenedList.length; i++) {      if (params.index === i) {        state.pageOpenedList[i].selected = true      } else {        state.pageOpenedList[i].selected = false      }    }    // 更新下本地新的打开页面列表数据    sessionStorage.pageOpenedList = JSON.stringify(state.pageOpenedList)    },    // 移除PageOpenedList    [removePageOpenedList] (state, params = null) {        if (!params) {          return        }        if (typeof params.action === 'number') {          state.pageOpenedList.splice(params.action, 1)        } else {        //进这里是已经选择删除所有tab，赋值一个初始选中的tab          state.pageOpenedList = [{            title: '基础设施',            name: 'basicDevice',            selected: true          }]          //如果是删除其他的则再加上当前路由下的tab          if (params.action === 'closeOthers' && params.route.name !== 'basicDevice') {            state.pageOpenedList[0].selected = false            state.pageOpenedList.push({              title: params.route.meta.title,              name: params.route.name,              selected: true            })          }        }        // 更新下本地新的打开页面列表数据        sessionStorage.pageOpenedList = JSON.stringify(state.pageOpenedList)      },

<div class="a-tag">            <tag-nav :pageOpenedList="pageOpenedList" ref="tagNavRef" @closeTags="closeTags"                     @tagSelected="tagSelected"></tag-nav>          </div>          <div class="a-product">            <div class="loading" style="height:100%">              <keep-alive :max="5">                <router-view></router-view>              </keep-alive>            </div>          </div>

// 导航标签方法      closeTags (action,elId) {        let isRemoveSelected;        if (typeof action === 'number') { //移除单个          let elEvent = new Event('click');          document.getElementById(elId).dispatchEvent(elEvent);          //移除不管是不是当前的标签都默认设置为是当前的标签          for (let i = 0; i < this.$store.state.pageOpenedList.length; i++) {            if (action === i) {              this.$store.state.pageOpenedList[i].selected = true            } else {              this.$store.state.pageOpenedList[i].selected = false            }          }          //并且是当前的标签页          isRemoveSelected = this.$store.state.pageOpenedList[action].selected        }        this.$store.commit('removePageOpenedList', { route: this.$route, action })        if (isRemoveSelected) {          // 移除单个tag，导航到最后一个tag的页面          this.$router.push({            name: this.$store.state.pageOpenedList[this.$store.state.pageOpenedList.length - 1].name          })        } else if (action === 'closeAll') {          this.$router.push('/main/basicDevice');        }      },      tagSelected (index) {        if (this.$store.state.pageOpenedList[index].name !== this.$route.name) {          this.$router.push({            name: this.$store.state.pageOpenedList[index].name          })        }      },

 computed: {      pageOpenedList () {        return this.$store.getters.getPageOpenedList      },    },

watch: {      $route (to) {        // 路由变化，更新PageOpenedList        let index = this.$util.indexOfCurrentPageOpened(to.name, this.$store.state.pageOpenedList)        this.$store.commit('setPageOpenedList', { route: to, index })      },   }   

// 定位新打开的页面在pageOpenedList中位置    indexOfCurrentPageOpened(name, pageOpenedList) {    for (let index = 0; index < pageOpenedList.length; index++) {      if (pageOpenedList[index].name === name) {        return index      }    }    return -1  },

/** * 用于历史标签菜单 */export default {      beforeRouteLeave(to, from, next) {        console.log("mixins-beforeRouteLeave:",from);        let flag = true        this.$store.state.pageOpenedList.forEach(e => {    // pageOpenedList存储打开的tabs的组件路由          if(from.name == e.name) {            flag = false          }        })         if(flag && this.$vnode.parent && this.$vnode.parent.componentInstance.cache) {        //   let key = this.$vnode.key   // 当前关闭的组件名          var key = (this.$vnode.key == null || this.$vnode.key == undefined) ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') : this.$vnode.key;          let cache = this.$vnode.parent.componentInstance.cache  // 缓存的组件          let keys = this.$vnode.parent.componentInstance.keys  // 缓存的组件名          if(cache[key] != null) {            delete cache[key]            let index = keys.indexOf(key)            if(index > -1) {              keys.splice(index, 1)            }          }        }        next()      }  }

//引入混合方法import beforeLeave from './mixins/beforeLeave'Vue.mixin(beforeLeave)

 handleSelect(index,indexPath){            this.active = index;        },

watch:{        $route (to) {            console.log("accordion=============",to,to.path);            //进if判断说明是被重定向的地址，则使用重定向父级菜单路径去跳转，让父级页面自己去重定向            if(to.matched && to.matched[to.matched.length-1].parent.redirect != undefined){                this.handleSelect(to.matched[to.matched.length-1].parent.path,null);            }else {                this.handleSelect(to.path,null);            }        }    },

<div class="tabsBox">          <el-radio-group class="radioStyle" v-for="item in menus" :key="item.route" v-model="activeName" @change="checkItem(item.route)">            <el-radio-button :label="item.text" @blur.native="goPath(item.route)"></el-radio-button>          </el-radio-group>        </div>

data(){      return {        activeName:'参与人',        menus:[          {route:"partyManageReport",text:"参与人"},          {route:"staffManageReport",text:"员工"},          {route:"partyAccountManageReport",text:"主账号"},          {route:"partyAccountGroupManageReport",text:"主账号组"},          {route:"partySubAccountManageReport",text:"从账号(web资产)"},          {route:"partySubAccountManageD",text:"从账号(基础设施)"}          ]      }    },    watch:{        $route (to){            this.activeName = to.meta.title;        }    }, created(){      this.$store.state.pageOpenedList.forEach((item)=>{          if(item.selected){          this.activeName = item.title;          }      })     }