<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...
1.安装插件 npm i keep-alive yarnaddkeep-alive 2.通过router-view的meta.keepAlive判断是否需要缓存 <el-main><breadcrumb/><!-- 需要缓存数据的页面 --><keep-alive><router-viewv-if="$route.meta.keepAlive"/></keep-alive><!-- 不需要缓存数据的页面 --><router-viewv-if="!$route.meta.keep...
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>
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)更有...
exclude：可传字符串、正则表达式、数组，名称匹配成功的组件不会被缓存 max：可传数字，限制缓存组件的最大数量 include和exclude，传数组情况居多 先看下官网使用示例 <!--?基本?-->?<keep-alive>???<component?:is="view"></component></keep-alive><!--?多个条件判断的子组件?--><keep-a...