タブページはメインタブページに配置され
ますel-tabsメイン属性：
（1）editableTabsValue：選択したタブページ（名前で識別）を強調表示します
（2）editableTabs：タブページ配列（すべてのタブページ情報を格納します）、属性：name 、 タイトル
<!-- 标签页-->
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="selectTab">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
</el-tab-pane>
</el-tabs>
editableTabsValue、editableTabsはストアに保存されます
1.メニュー項目をクリックして、新しいタブページを生成します
メニュー項目をクリックして新しいタブを生成します。新しいタブを追加する前に、タブ配列にすでにタブが含まれているかどうかを確認します。すでにタブがある場合は、タブを選択するだけで済みます。
例：
クリックイベントaddTabsを使用して、メニュー項目のタイトルと名前をタブの配列に追加します
<el-menu-item index="/index" @click="addTabs({title:'首页',name:'/index'})">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item :index="item.name" :route="{path:item.path}" v-for="item in menu.children" @click="addTabs(item)">
<template slot="title">
<i :class="item.icon"></i>
<span>{
{
item.title}}</span>
</template>
</el-menu-item>
ストア内の対応するaddTabsメソッドは、新しいタブアイテムを追加し、それ、つまり選択された状態を強調表示します。
//添加标签页
addTab(state,item){
//当标签页数组中没有当前标签时才添加。
let index = state.editableTabs.findIndex(e => e.name===item.name)
if(index===-1){
state.editableTabs.push({
title: item.title,
name: item.name
})
}
//将新添加标签页激活：高亮
state.editableTabsValue = item.name
}
タブページ配列のeditableTabsは動的に更新されるため、editableTabsValueとeditableTabsの値はmainで動的に取得する必要があります。計算によって実装されます。
次のように：
//动态监测变量值
computed:{
editableTabsValue: {
get(){
return this.$store.state.menus.editableTabsValue;
},
set(val){
this.$store.state.menus.editableTabsValue = val;
}
},
editableTabs:{
get(){
return this.$store.state.menus.editableTabs;
},
set(val){
this.$store.state.menus.editableTabs = val;
}
}
},
2.タブ項目をクリックして、ページジャンプを実行します
タブにバインディングイベント@tab-click="selectTab"
タブセクションを追加します
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="selectTab">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
ページジャンプは、ルートジャンプ機能selectTabによって実現されます。
メニュー項目の名前はルーティング項目の名前と同じでなければならないという前提があります。
//点击某个标签页实现路由跳转
selectTab(target){
//新知识点
//this.$router.push()不仅可以通过path跳转,还可以通过name跳转
this.$router.push({
name:target.name}).catch(err => {
console.log(err)
})
}
3、バグ
バグ1：ページを更新すると、以前に表示されていたタブが消えました。
理由：ページが更新されると、vuexストアのデータがデフォルトに復元されます。
解決策：セッションにeditableTabsとeditableTabsValueを保存します。
ページが更新されると、vuexの情報がsessionStorageに保存されます。ページが読み込まれると、セッションの情報が読み取られ、ストアに読み込まれます。
App.vueで操作する
// 解决刷新页面后，页面path和页面内容不同bug
created() {
//在页面刷新时将vuex里面的信息保存在sessionStorage
window.addEventListener("beforeunload",() => {
sessionStorage.setItem("editableTabs",JSON.stringify(this.$store.state.menus.editableTabs))
sessionStorage.setItem("editableTabsValue",this.$store.state.menus.editableTabsValue)
})
//页面加载时读取session中的信息，并加载到store中
sessionStorage.getItem("editableTabsValue")&&this.$store.commit("getEditableTabsValue",sessionStorage.getItem("editableTabsValue"))
sessionStorage.getItem("editableTabs")&&this.$store.commit("getEditableTabs",JSON.parse(sessionStorage.getItem("editableTabs")))
},
ストア内の関連関数getEditableTabsValue、getEditableTabsに対応します
//从session中获取editableTabsValue
getEditableTabsValue(state,editableTabsValue){
state.editableTabsValue = editableTabsValue
},
//从session中获取editableTabs
getEditableTabs(state,editableTabs){
state.editableTabs = editableTabs
},
バグ2：メニュー項目にURLから直接アクセスし、ストアとセッションに関連するタブページ情報がない場合、この時点でタブページは空白になります。したがって、監視ウォッチをApp.vueに追加します
//监控
//当用户通过输入url访问界面时，此时store中和session中可能都没有该页面标签页的信息，这时就要通过watch解决
//原理：在我们访问对应path之前，就把path对应的title、name加入到store中
watch: {
$route(to,from){
//当我前往的路由路径不是login时，就把该路由信息加入到标签页数组中
if(to.path !== '/login'){
let obj = {
title: to.meta.title,
name: to.name
}
this.$store.commit("addTab",obj)
}
}
}
注：ここではルートが使用されます。
ルートとルーターの
違いbug3：ユーザーが終了した後、ストア情報がデフォルトに復元されない
logout(){
this.$axios.post('/logout').then(res => {
//清除本地用户信息
localStorage.clear()
sessionStorage.clear()
//清除store中token信息
this.$store.commit("resetState");
//清除store中的标签页信息
this.$store.commit("resetEditableTabs")
this.$store.commit("resetEditableTabsValue")
router.push('/login')
})
},