【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