Uso de pestañas
La página de pestañas se coloca en la
página de pestañas principal. Atributos principales de el-tabs:
(1) editableTabsValue: resalta la página de pestañas seleccionada (identificada por el nombre)
(2) editableTabs: conjunto de páginas de pestañas (almacena toda la información de la página de pestañas), Atributos: nombre , título
<!-- 标签页-->
<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, las pestañas editables se almacenan en la tienda
1. Haga clic en el elemento del menú para generar una nueva pestaña
Haga clic en el elemento del menú para generar una nueva pestaña. Antes de agregar una nueva pestaña, verifique si la matriz de pestañas ya contiene la pestaña. Si ya tiene la pestaña, solo necesita seleccionar la pestaña.
Ejemplo:
agregue el título y el nombre del elemento del menú a la matriz de pestañas a través del evento de clic 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>
El método addTabs correspondiente en la tienda agrega un nuevo elemento de pestaña y lo resalta, es decir, el estado seleccionado.
//添加标签页
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
}
Debido a que la matriz de páginas de pestañas editableTabs se actualiza dinámicamente, los valores editableTabsValue y editableTabs deben obtenerse dinámicamente en main. Implementado por computado.
como sigue:
//动态监测变量值
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. Haga clic en el elemento de la pestaña para lograr el salto de página
Agregar evento de enlace @tab-click="selectTab"
sección de pestaña en pestaña
<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 salto de página se realiza mediante la función de salto de ruta selectTab.
La premisa es que el nombre del elemento del menú debe ser el mismo que el nombre del elemento de enrutamiento.
//点击某个标签页实现路由跳转
selectTab(target){
//新知识点
//this.$router.push()不仅可以通过path跳转,还可以通过name跳转
this.$router.push({
name:target.name}).catch(err => {
console.log(err)
})
}
Explicación detallada de los parámetros de router.push()
3, error
bug1: Al actualizar la página, las pestañas mostradas anteriormente desaparecieron.
Motivo: los datos en la tienda vuex se restaurarán a los valores predeterminados a medida que se actualice la página.
Solución: almacene editableTabs y editableTabsValue en la sesión.
Cuando se actualiza la página, la información en vuex se guarda en sessionStorage.Cuando se carga la página, la información en la sesión se lee y se carga en la tienda.
Operar en 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")))
},
Correspondiente a las funciones relacionadas en la tienda, getEditableTabsValue, getEditableTabs
//从session中获取editableTabsValue
getEditableTabsValue(state,editableTabsValue){
state.editableTabsValue = editableTabsValue
},
//从session中获取editableTabs
getEditableTabs(state,editableTabs){
state.editableTabs = editableTabs
},
error 2: si se accede a un elemento del menú directamente a través de la URL y no hay información relevante de la página de pestañas en la tienda y la sesión, la página de pestañas estará en blanco en este momento. Así que agregue un reloj de monitoreo a 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)
}
}
}
Nota : la ruta se utiliza aquí.
Diferencia entre la ruta y el enrutador
bug3: después de que el usuario sale, la información de la tienda no se restaura a la configuración predeterminada
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')
})
},