vue系列---【vue路由$route.go(-1)返回使用KeepAlive保持原頁面數據不更新】

場景：開發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
　　}
}