keepAlive缓存实现页面返回不刷新

最新推荐文章于 2022-08-31 22:36:30 发布

kurcp

最新推荐文章于 2022-08-31 22:36:30 发布

阅读量623

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_59570698/article/details/123846910

本文介绍如何在Vue项目中利用router.js配置文件实现特定页面的缓存功能，通过keep-alive组件控制页面是否缓存，避免重复加载提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、router.js中在需要设置不刷新的页面中添加keepAlive:true即可

{
  path:"/model",
  redirect:"/modelsetting",
  component:()=>import('@/components/Model/ModelSet/Model.vue'),
  meta:{title:"模型看板"},
  children:[
    { path:'/Setup',component:()=>import('@/components/Model/ModelSet/Setup.vue'),meta: { title: "新增模型"} ,keepAlive:true}},
{path:'/EditSetting',name:'EditSetting',component()=>import('@/components/Model/ModelSet/EditSetting.vue'),meta: { title: "编辑模型"},keepAlive:true },},
  { path:'/creditresult',name:'creditresult',component:()=>import('@/components/Model/Credit/EarlyResult.vue'),meta: { title: "模型结果",keepAlive:false},
    },
 ]
},

2、在路由输出位置修改

<div>
   <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>