vue 组件状态缓存，keep-alive

红太狼 2022-12-21 09:25 60阅读 0赞

> 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的**keep-alive**技术了.

##### 一、设置`include`、`exclude` #####

<keep-alive include='page1,page2'>
    	<component1 />
    	<component2 />
    	...	
    <keep-alive>
    
    <keep-alive exclude='page3,page4'>
    	<component1 />
    	<component2 />
    	...	
    <keep-alive>

##### 二、配合`vue-router` #####

1.  `router/index.js` 在对应的页面路由配置中添加`meta.keepAlive`
    
        // router/index.js
        const routes = [
        	{ 
        		path: '/page1',
        		component: () => import('../views/page1.vue'),
        		meta: { 
        			keepAlive: true	// 页面将会被缓存
        		}
        	},
        	{ 
        		path: '/page2',
        		component: () => import('../views/page2.vue')，
        		meta: { 
        			keepAlive: false // 页面将不会被缓存
        		}
        	}
        ]
2.  使用两个`<router-view>`
    
        <keep-alive>
        	<router-view v-if="$route.meta.keepAlive">
        		
        	</router-view>
        </keep-alive>
        
        
        <router-view v-if="!$route.meta.keepAlive">
        	
        </router-view>

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中使用keepAlive组件缓存遇到的坑

项目开发中在用户由分类页category进入detail需保存用户状态，查阅了Vue官网后，发现vue2.0提供了一个keep-alive组件。上一篇讲了keep-aliv

男娘i/ 2023年10月10日 09:45/ 0 赞/ 59 阅读

相关 vue中使用keepAlive组件缓存遇到的坑

项目开发中在用户由分类页category进入detail需保存用户状态，查阅了Vue官网后，发现vue2.0提供了一个keep-alive组件。上一篇讲了keep-aliv

Myth丶恋晨/ 2023年08月17日 17:38/ 0 赞/ 161 阅读

相关 vue 组件状态缓存，keep-alive

> 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回

红太狼/ 2022年12月21日 09:25/ 0 赞/ 61 阅读

相关 vue keepalive

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不

男娘i/ 2022年11月01日 10:54/ 0 赞/ 207 阅读

相关 Vue 组件

首先，我们还是先创建一个vue实例，很熟练了，没难度。 <div id="app"></div> <script> let vm =

落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 376 阅读

相关 vue组件

全局组件  Vue.component('todo-list',{ template:"<li>{

左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 358 阅读

相关 vue组件

定义全局组件的三种方式方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词，不是实例对象--> <m

落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 394 阅读

相关 vue中keepAlive组件的作用及使用方式

在面试的时候，很多面试官再问vue的时候可能就会提一嘴，你知道keep-alive有什么作用吗？ ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

约定不等于承诺〃/ 2022年02月17日 00:20/ 0 赞/ 315 阅读

相关 Vue中的keepalive使用缓存页面和不缓存页面

什么是keepalive：我们在平时开发中，总有部分组件没必要多次 Init,我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时，也不会重新init。keepa

￡神魔★判官ぃ/ 2021年09月08日 16:08/ 0 赞/ 933 阅读

相关 Vue组件

Vue组件 1. 什么是组件 1. 组件的概念：组件即自定义控件，是Vue.js最强大的功能之一 2. 组件的用途：组件能够封装可重用代码，扩展html标签功能

ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 655 阅读