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

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

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

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

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

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

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




 修改为以下即可




    
        
    

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

你可能感兴趣的:(javascript,前端,vue.js)