<router-view v-if="$route.meta.keep_alive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keep_alive"></router-view> 2. 在router中设置meta属性,设置 keepAlive: true 表示需要使用缓存,false的话表示不需要使用缓存。且添加滚动行为 scrollBehavior router/index.js 的配置如下: i...
在Vue2中,keep-alive是一个内置组件,用于缓存动态组件或路由视图组件。它的主要作用是避免在组件切换时重新创建组件实例,从而保留组件的状态或避免重复渲染,这样可以提高应用的性能和用户体验。 如何在vue2中配置和使用keepalive 基本使用: html <keep-alive> <component :is="currentView"></...
1.1. activated 钩子 当一个被 <keep-alive> 缠绕的组件被重新激活时(即从缓存中取出并重新添加到 DOM 中),activated 钩子将会被调用。 这是执行组件初始化工作或更新操作的好时机。 1.2. deactivated 钩子 当一个被 <keep-alive> 缠绕的组件被停用时(即从 DOM 中移除但仍然被缓存),deactivated 钩子将会被调...
keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view的整个内容。 基本使用如下: <keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-alive>
1.安装插件 2.通过router-view的meta.keepAlive判断是否需要缓存 3.在对应的路由里面配置keepAlive的值 4.如果页面有部分数据需要刷新(例...
vue-router的keep-alive(前进刷新,后退不刷新) 单页面适用 前言:新的项目需要实现 A页面(已经填了一半的表单,未保存) —— >跳转 B页面(填写信息) ———>返回A页面(this.$router.go(-1)) 目的是返回的A页面不刷新,未保存的表单… 泽玲发表于前端知识杂... 用vue2 +vue-router2 + es6 +web...
一般我都在app.vue中使用可以通过keep-alive和路由守卫搭配使用做到筛选是否需要组件缓存的功能 route.js importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)constroutes=[{path:"/",name:"home",component:()=>import('@/views/home'),meta:{keepAlive:true}},{path:"*",name:"404",component...
component: () => import('./views/keep-alive/index.vue'), meta: { deepth: 0.5 // 定义路由的层级 } }, { path: '/list', name: 'list', component: () => import('./views/keep-alive/list.vue'), meta: { deepth: 1 keepAlive: true //需要被缓存 ...
keep-alive 是 Vue 的一个内置组件,可以缓存组件实例,通常用于缓存不活动的组件实例,防止重复渲染 DOM,[官网传送门](https://cn.vuejs.org/v2/api/#keep-alive)。 ## 基本原理 > keep-alive 是一个内置组件,了解 vue 组件的[渲染过程](./component.md#组件初始化过程)和[生命周期](./lifeCycle.md)更有...