需求
切换标签页后,我们想要切换前的标签页的内容不变,等我切换回来的时候可以继续使用。
比如我在A标签录入了一些文字,切到其他标签B,再切回来,这段文字还在,否则每次都让用户输入,体验不行。
实现思路
1、给vuex里储存当前打开的标签页数组tabPanes,增加一个计算属性getter
2、这个getter定义一个方法keepAliveTab,获取当前打开的标签页的key
3、页面框架,给路由标签设置
4、
5、关闭标签时,tabPanes会删掉这个标签的元素,keepAliveTab会跟着变化,这样关闭的标签就不在
实现
1、给vuex里储存当前打开的标签页数组tabPanes,增加一个计算属性getter
2、这个getter定义一个方法keepAliveTab,获取当前打开的标签页的key
// src/store/index.js
state: () => ({
selectedKeyStore:"index", // 当前激活的页面的标签页、菜单
tabPanes: [ // 全局的标签页,主要是配置首页不可关闭
webSite.firstPage,
],
}),
getters: {
keepAliveTab:(state)=>{ // 返还当前打开标签页的key属性,组成数组,用于动态缓存标签页
let tempTab = []
state.tabPanes.forEach(element => {
tempTab.push(element.key)
});
return tempTab
}
}
//....省略了操作tabPanes的方法
3、页面框架,给路由标签设置
4、
src/views/layout/index.vue,下面是以Vue3和ant-design-vue 2.x 为例,router-view标签内是Vue3的新写法,固定写法
<template>
<!-- 总框架 -->
<a-layout id="baseLayout">
<!-- 侧边栏 = logo + 菜单栏 -->
<sidebar></sidebar>
<!-- 主体内容 = 顶部栏 + 标签页 + 主页面 -->
<a-layout>
<!-- 顶部栏 -->
<top></top>
<!-- 主页面 -->
<a-layout-content :style="{margin: '10px 10px',padding: '5px',background: '#fff',}">
<!-- 路由页面,Vue3固定这样写 -->
<router-view v-slot="{ Component }">
<!-- include 是动态缓存标签页,只有当前打开的标签才会缓存,关闭则不缓存 -->
<keep-alive :include="keepAlive">
<component :is="Component" />
</keep-alive>
</router-view>
</a-layout-content>
</a-layout>
</a-layout>
</template>
<script>
import top from "/@/views/layout/top/index.vue"; // 引入顶部组件
import sidebar from "/@/views/layout/sideBar/index.vue"; // 引入侧边栏
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
export default {
name:"layout",
components: {
top, // 顶部菜单
sidebar, // 菜单栏
},
setup() {
const store = useStore()
return {
// 设置动态页面缓存,关闭标签页时去掉缓存
keepAlive:computed(() => store.getters.keepAliveTab),
};
},
};
</script>
注意!!!
1、组件一定要有名字,否则keepAlive会失效
<script>
export default {
name:"componentsName"
}
</script>
2、路由里的名字要和组件的一致,否则keepAlive会失效
const routes = [
{
path: '/index',
name: 'componentsName',
component: () => import('@/views/home/index.vue'),
meta: {
name: "首页"
},
},
]