场景:开发vue页面中,a页面有form表单 可以选择数据,之后点击第一条数据就跳转到b页面 ,然后再从b页面返回原来的页面,要实现原来的页面form数据保持不变 ,这里返回用的是@click="$router.go(-1)"
解决思路:在路由入口处包裹一层<keep-alive></keep-alive>,然后找到路由文件,找到你需要缓存的路由,在meta传keepAline值
代码展示:
1.路由入口文件 app.vue
<template> <div id="app"> <!-- 需要缓存的组件入口 --> <!-- keepAlive是从路由传过来的 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不需要缓存的组件入口 --> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template>
2.路由文件
{ path: 'profile', component: () => import(@/view/profile.vue) name: 'Profile', meta: { name:profile keepAlice:true // 需要缓存传true 不需要可以传false或者不写keepAlice } }