效果
20190828155347726.gif
更新记录
2022/4/30 修改部分部分、删除多余代码。
2020/4/15 新增sessionStorage 解决刷新后消失问题。
思路
- 封装NavMenut组件组件及Tabs组件
- 用 vuex 作为组件之间传值
- router-view 放入 Tabs组件内
- 使用 使用 Array.prototype.some()方法
- 为了防止用户多次点击添加 做一个判断的值
- 用 Array.prototype.some() 实现 Array.prototype.includes()
具体代码
具体思路和一些要点请看注释
aside.vue(侧边栏组件)
个人建议将 submenu 和 menu所需参数写成数据
<template>
<div class="zgz-admin-index-aside">
<el-col :span="24">
<div class="zgz-shop-avatar-name">
<img class="avatar" src="~_img/timg.png" alt="追光者Aaron" />
<p class="name">追光者Aaron</p>
</div>
<!--
:default-active="$route.name"
获取router路由的name 对应menu-item内的index
为了对应 tabs 的跳转点击 做选中
-->
<el-menu
:default-active="$route.name"
class="el-menu-vertical-demo""
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<!-- 循环数据格式 -->
<el-submenu :index="`${index}`" v-for="(menu,index) in menuList" :key="index">
<template slot="title">
<i :class="menu.icont"></i>
<span>{{menu.name}}</span>
</template>
<el-menu-item-group>
<el-menu-item :index="item.routeName" v-for="item in menu.menuItem" :key="item.index" @click="handleOpen2(item)">{{item.name}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'zgz-admin-index-aside',
components: {},
data() {
return {
// 将所需submenu,menu和tabs所需参数写成数据格式
menuList: [
{
icont: 'el-icon-s-tools',
name: '商店设置',
menuItem: [
{
title: '设置',
routeName: 'Setting',
name: '设置'
},
{
title: '小程序广告图',
routeName: 'WxAd',
name: '小程序广告图'
}
]
},
{
icont: 'el-icon-s-order',
name: '订单',
menuItem: [
{
title: '订单管理',
routeName: 'orderList',
name: '订单管理'
}
]
}
]
};
},
created() {},
mounted() {},
methods: {
// 调用 注册vuex内注册的editableTabs方法
...mapActions({
handleOpen2:'editableTabs'
})
}
};
</script>
tabs.vue
element 官方组件方法及方法没有注释
<template>
<div class="">
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="event => $router.push({ name: event.name })">
<el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name" />
</el-tabs>
<router-view />
<!-- 放入router-view -->
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
data() {
return {};
},
created() {
// 刷新加载sessionStorage存着地址
if (sessionStorage.getItem('tabsPage')) {
const TabsValue = sessionStorage.getItem('TabsValue');
this.SET_TABS_PAGE(JSON.parse(sessionStorage.getItem('tabsPage')));
this.SET_TABS_VALUE(TabsValue);
this.$router.push({ name: TabsValue });
}
},
computed: {
...mapGetters(['tabsPage', 'TabsValue']),
// 监听vuex保存的数据
editableTabs: {
get() {
return this.tabsPage;
},
set(val) {
this.SET_TABS_PAGE(val);
},
},
editableTabsValue: {
get() {
return this.TabsValue;
},
set(val) {
this.SET_TABS_VALUE(val);
},
},
},
methods: {
...mapMutations(['SET_TABS_PAGE', 'SET_TABS_VALUE']),
removeTab(targetName) {
const { editableTabs: tabs, editableTabsValue } = this;
let activeName = editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
const nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) activeName = nextTab.name;
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
// 删除时跳转不在停留被删除页
this.$router.push({ name: activeName });
},
},
};
</script>
vuex（store.js）
重点来了！！！！
import Vue from 'vue';
import Vuex from 'vuex';
// 引入 router 在vuex内使用router跳转
import router from '@/router';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
// 定义tabs 所需参数
tabsPage: [],
TabsValue: '',
},
getters: {
tabsPage(state) {
return state.tabsPage;
},
TabsValue(state) {
return state.TabsValue;
},
},
mutations: {
SET_TABS_PAGE: (state, tabsPage) => {
state.tabsPage = tabsPage;
// 防止刷新后没有
window.sessionStorage.setItem('tabsPage', JSON.stringify(tabsPage));
},
SET_TABS_VALUE: (state, TabsValue) => {
state.TabsValue = TabsValue;
// 防止刷新后没有
window.sessionStorage.setItem('TabsValue', TabsValue);
},
},
actions: {
// 注册方法
editableTabs({ commit, state }, tabItem) {
// 浅拷贝 state.tabsPage
const tabs = [...state.tabsPage];
// 结构tabItem
const { name, routeName } = tabItem;
// 判断数组内是否为空
if (tabs.length !== 0) {
/* 使用 Array.some 去判断是否存在对象信息
* even方法 如果对象存在返回true,不存在则返回flase
*/
const even = obj => tabs.some(item => item.name === routeName);
if (!even(tabItem)) {
// 将tabs所需参数push进arr数组
tabs.push({ title: name, name: routeName });
// 赋值给tabsPage参数
commit('SET_TABS_PAGE', tabs);
}
} else {
// 如果为0
// 将tabs所需参数push进arr数组
tabs.push({ title: name, name: routeName });
// 赋值给tabsPage参数
commit('SET_TABS_PAGE', tabs);
}
// 赋值给TabsValue参数
commit('SET_TABS_VALUE', tabItem.routeName);
// 跳转
router.push({ name: tabItem.routeName });
},
},
});
app.vue
<template>
<div class="admin">
<el-container>
<el-aside width="300px">
<zgz-aside></zgz-aside> <!-- 我是侧边栏 -->
</el-aside>
<el-container>
<el-header>
<zgz-header></zgz-header>
</el-header>
<el-main>
<zgz-tabs></zgz-tabs> <!-- 我是tabs组件 -->
</el-main>
</el-container>
</el-container>
</div>
</template>
后记
这篇文章可以当个思路看看
如果有其他方法实现，欢迎一起讨论。
最初开发想用Array.includes 去实现方法 但是对象数组无法去判断
只能用Array.some 去实现Array.includes
