Vue3实现页面缓存，切换tab页面保持不变

最新推荐文章于 2024-07-23 08:58:45 发布

处女座佩奇

最新推荐文章于 2024-07-23 08:58:45 发布

阅读量5.5k

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_42264030/article/details/127877485

版权

Vue.js 缓存 keep-alive 路由配置页面状态

关键词由CSDN通过智能技术生成

实现该部分主要分为两个步骤。

首先是在index.js中，将跳转的路由设置如下：

{
    path: "control",
    name: "Control",
    component: () => import("../page/Control.vue"),
    meta:{
        keepAlive: true //此页面需要缓存
    }
},

如果该页面需要缓存，添加以下代码，否则设置为false

meta:{
    keepAlive: true //此页面需要缓存
}

随后在主页面中，找到你跳转路由的地方，我的主页面是MainLayout.vue，是在el-pane后面进行跳转的，原本如下：

<el-tab-pane
v-for="item in editableTabs"
:key="item.index"
:label="item.title"
:name="item.index"
:closable="handleisClose(item)"
></el-tab-pane>

<router-view />

修改为以下即可

<el-tab-pane
v-for="item in editableTabs"
:key="item.index"
:label="item.title"
:name="item.index"
:closable="handleisClose(item)"
></el-tab-pane>

<router-view v-slot="{ Component }">
    <keep-alive>
        <component :is="Component" />
    </keep-alive>
</router-view>

以上便完成了tab页面缓存的功能，欢迎大家多多点赞收藏