【Vue】keep-alive緩存路由跳轉前的狀態與使用陷阱

前言：保存路由跳轉前的狀態這種應用場景還是很常遇到的，比如進行商品篩選，篩選出一些后，點擊路由跳轉到某個商品的詳情頁，然后返回頁面時，我想讓之前的頁面能展示之前篩選出來的商品。

 

一、代碼實現
<!-- App.vue根組件代碼 -->
<template>
<div class="app">
<div class="slide">
<ul>
<li><router-link to="/page1" >page1</router-link></li>
<li><router-link to="/page2" >page2</router-link></li>
</ul>
</div>
<div class="content">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
//路由配置頁面代碼
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/page/Page1'
import Page2 from '@/page/Page2'

Vue.use(Router)

export default new Router({
routes: [
{path: '/page1', component: Page1 },
{path: '/page2', component: Page2 },
],
mode:'history'
})
 

<!-- Page1代碼 -->
<template>
<div class="page-1">
<h3>page1</h3>
路由前的輸入狀態:<input type="text" v-model="value">
<router-link to="page2">跳轉到page2</router-link>
</div>
</template>
<script type="text/javascript">
export default {
name:'page1',
data(){
return {
value:''
}
}
}
</script>
<!-- page2代碼 -->
<template>
<div class="page-2">
<h3>page2</h3>
<router-link to="/page1">返回到page1</router-link>
</div>
</template>
這樣就可以保存到路由跳轉前的狀態了。但是這樣有個問題是，如果頁面很多的話，並且並不是所有頁面都需要保存路由前的狀態。

 

二、代碼優化
<!-- App.vue根組件代碼 -->
<template>
<div class="app">
<div class="slide">
<ul>
<li><router-link to="/page1" >page1</router-link></li>
<li><router-link to="/page2" >page2</router-link></li>
</ul>
</div>
<div class="content">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</div>
</template>
//路由配置頁面
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/page/Page1'
import Page2 from '@/page/Page2'

Vue.use(Router)

export default new Router({
routes: [
{path: '/page1', component: Page1, meta:{ keepAlive:true } },
{path: '/page2', component: Page2 },
],
mode:'history'
})
這樣，我們可以自由控制需要緩存的路由頁面了。

 

三、keep-alive使用陷阱
<!-- App.vue根組件代碼 -->
<template>
<div class="app">
<div class="slide">
<ul>
<li><router-link to="/page1" >page1</router-link></li>
<li><router-link to="/page2" >page2</router-link></li>
</ul>
</div>
<keep-alive>
<div class="content">
<router-view></router-view>
</div>
</keep-alive>
</div>
</template>
keep-alive里面必須包裹組件，而不能出現其他標簽。不然會導致無法緩存頁面
————————————————
版權聲明：本文為CSDN博主「汪小穆」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/w390058785/article/details/82814236