elementui实现NavMenu 导航菜单与Tabs 标签页联动

最新推荐文章于 2024-05-22 18:11:34 发布

扶苏怎么会服输

最新推荐文章于 2024-05-22 18:11:34 发布

阅读量3.2k

点赞数 2

分类专栏： vue.js web JS 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/Lucky1019/article/details/126739997

版权

本文介绍如何在Vue2应用中结合Vuex和ElementUI实现NavMenu导航菜单与Tabs标签页的联动。内容包括：1) 使当前活跃Tab与路由Path同步；2) 刷新页面时利用sessionStorage保存tabList；3) 删除Tab时更新活跃Tab及tabList；4) 监听路由变化以更新Tab状态。

摘要由CSDN通过智能技术生成

技术：vue2+vuex+elementui组件库

store/index.js文件里

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    tabList:[]
  },
  mutations: {
    addTab: (state, tab) => {
      // 如果tab已经存在，不添加新的tabs
      if (state.tabList.some(item => item.path === tab.path)) return
      state.tabList.push(tab)
    }
  },
  getters: {
    // 获取tbsList
    getTabs: (state) => {
      return state.tabList
    }
  },
  actions: {
  },
  modules: {
  }
})

功能点：
1：当前活跃的tab就是当前路由的path
2: 页面刷新，tabList数据丢失，则在刷新之前使用sessionStorage进行存储
3：删除tab的时候，活跃的tab变为