[JavaScript知识库]keepAlive缓存实现页面返回不刷新

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>