效果
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"
>
<!-- 循環(huán)數據格式 -->
<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']),
// 監(jiān)聽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>
后記
這篇文章可以當個思路看看
如果有其他方法實現少办，歡迎一起討論苞慢。
最初開發(fā)想用Array.includes 去實現方法 但是對象數組無法去判斷
只能用Array.some 去實現Array.includes
