1.实现效果
2.实现原理
vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理。
将vuex中的数据保存到sessionStorage中,避免页面刷新丢失,当浏览器关闭时,清空数据。
通过ref定位,拿到当前窗口宽度与当前所在路由的tab标签的所有宽度,判断两者,实现对多tab超出窗口宽度的处理。
当点击tab标签页的时候,获取相应的激活项,动态的实现左侧菜单栏的选中状态,用watch监听,updateActiveName和updateOpened。
当关闭tab标签的时候,splice删除当前标签,若是删除的最后一项,跳转到该项的前一项页面。当长度为1时,跳转到首页。
3.主要代码
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
catch_components: [],
activePath: '/index',
openNames: [],
activeName: "",
tranx: "-0",
tabList: [
{ path: '/index', label: '首页', name: '首页' }
]
},
mutations: {
//清空vuex数据
clearTabs(state) {
state.catch_components = []
state.activePath = '/homepage'
state.openNames = []
state.activeName = ""
state.tranx = "-0"
state.tabList = [
{ path: '/homepage', label: '首页', name: 'home' }
]
},
// 跳转页面执行
selectMenu(state, submenu) {
var activePath = submenu.path
var oldTabList = state.tabList
var result = oldTabList.some(item => {
if (item.path === activePath) {
return true
}
})
if (!result) {
oldTabList.push({
path: submenu.path,
name: submenu.name,
label: submenu.label,
index: submenu.index,
subName: submenu.subName
})