有关keep-alive缓存路由的各种用法

el/2024/6/24 18:52:27

keep-alive基本用法

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

主要用于保留组件状态或避免重新渲染。


<!-- 基本 -->
<keep-alive><component :is="view"></component>
</keep-alive><!-- 多个条件判断的子组件 -->
<keep-alive><comp-a v-if="a > 1"></comp-a><comp-b v-else></comp-b>
</keep-alive><!-- 和 `<transition>` 一起使用 -->
<transition><keep-alive><component :is="view"></component></keep-alive>
</transition>

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b"><component :is="view"></component>
</keep-alive><!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

被缓存的 组件会多出两个生命周期钩子函数

//此生命周期可以代替默认未缓存状态下mounted实例被挂载之后的生命周期
//即此生命周期只有在keep-alive缓存状态下才可生效activated(){console.log("组件被激活")this.count++this.getData("https://jsonplaceholder.typicode.com/todos/"+this.count)this.timeInterval()},//此生命周期可以代替destory钩子,对某些实例进行销毁deactivated(){console.log("组件被冻结")clearInterval(this.timer)}

keep-alive案例

问题:
如果想要router-view 里面某个组件被缓存除了include还可以在router-link换一种写法:

//routes配置
export default[{path:'/',name:'home',component:Home,meta:{keepAlive:true;//需要被缓存}}{path:'/:id',name:'home',component:Edit,meta:{keepAlive:false;  //不需要被缓存}}
]
组件中的配置:
<keep-alive><router-view v-if='$route.meta.keepAlive'><!-- 这里是会被缓存的视图组件,比如 Home! --></router-view>
</keep-alive><router-view v-if='!$route.meta.keepAlive'><!-- 这里是不被缓存的视图组件,比如 Edit! --></router-view>

优点:不需要例举出需要被缓存组件名称

【附加】使用router.meta拓展
假设这里有3个路由:A、B、C。
需求:
默认显示A组件
B组件调到A组件,A组件不刷新
C组件跳到A组件,A组件刷新

实现方式

在A路由里面设置meta属性:
{path:'/',name:'A',component:Ameta:{keepAlive:true   //需要被缓存}
}

在B组件路由里面设置beforeRouteLeave:

export default{data(){return{};methods:{};beforeRouteLeave(to,from,next){//设置从当前组件调到下一个组件设置下一个组件的路由meta的值变为trueto.meta.keepAlive=true;//让A缓存,既不刷新next();}}
}

在C组件里面设置beforeRouteLeave:
export default{
data(){
return{};
},
methods:{};
beforeRouteLeave(to,from,next){
//设置下一个路由的meta
to.meta.keepAlive=false;//让A不缓存,即刷新
}
}

这样既能实现B回到A,A不刷新,c到A,A刷新的操作

总结

路由大法不错,不需要关心哪个页面跳转过来的,只要 router.go(-1) 就能回去,不需要额外参数。

然而在非单页应用的时候,keep-alive 并不能有效的缓存了


http://www.ngui.cc/el/3419168.html

相关文章

uni-app,Hbuilder编辑器中运行微信小程序开发者工具调试窗口,报错

首先感谢这位大神的分享&#xff0c;原地址在这&#xff1a; https://segmentfault.com/a/1190000023191861 解决方式&#xff1a; 打开微信开发者工具&#xff0c;找到设置的安全设置&#xff1a; 选择安全&#xff0c;启动服务端口

vuecli3.0 引入vant报错Cannot find module ‘babel-plugin-import‘ from

是因为没有安装 babel-plugin-import 运行命令 yarn add babel-plugin-import

Cannot read property ‘cancelToken‘ of undefined“

是因为在添加请求拦截器的时候&#xff0c;最后没有添加返回值return config方法 正确的写法应该是: axios.interceptors.request.use((config)>{ if(getStore(‘token’)){ config.headers.AuthorizationgetStore(‘token’); } return config; },(error)>{ console.log…

使用map的方式将数组中的对象,提取出来,转化成数组

如下&#xff1a; let imageList:[ { url:"first" }, { url:"second" } ] //这是第一种方法&#xff0c;是缩写 imageList.map(item>item.url); //第二种方法是全写 imageList.map((item)>{ return item.url; }) 输出的内容为&#xff1a;

uni-app实现多个图片预览

html的写法&#xff1a; <view > <image click"openImg(indexUrl,itemImg.url)" v-for"(itemImg,indexUrl) in info.images" class"w-100" mode"widthFix" :key"indexUrl" :src…

js中判断值的各种方式

//1.判断两个值是否相等 let v1,x2,s1; object.is(v,x) //false object.is(v,s) //true //2.判断json中是否包含某个键 let tt{xx:123,cc:‘3’’}; tt.xxd’’;’ tt.hasOwnProperty(‘xx’); //true tt.hasOwnProperty(‘xxd’);//true tt.hasOwnProperty(‘hasOwnProp…

@vue/cli卸载后安装新版本,无法卸载解决方式

今天更新vue/cli时&#xff0c;遇到问题&#xff1a;卸载不掉旧版本4.0 运行了npm uninstall vue/cli -g&#xff0c;之后&#xff0c;居然是up to date in,或者是显示删了很多文件&#xff0c;但是一运行 vue -V依然是可以查看版本的&#xff0c;说明没有卸载掉 以下方法可成…

VUE父级使用子组件以插槽的形式,在父级修改内容任意向子级插入

**父级组件的写法&#xff1a;** 子组件是firstSon <template> <div> <first-son> //向子组件中插入此内容 <div slot"firstcontent"></div> </first-son> </div&…

Map转成JSON对象

实际场景&#xff1a; 后端接口需要你传的参数是以上类型&#xff0c;由于是答题的场景&#xff0c;每次点击下一题则自动将题号作为键&#xff0c;选项作为值传入&#xff0c;等待所有题目答完统一传给后端 let val11; let val22; let zhinew Map(); //map追加值得方式 zhi.…

将传入的参数以值一为key,值2为value的形式作为JSON接收

let obj{};obj[值一]值2//结果为&#xff1a;{值一&#xff1a;值二}JSON.stringify(obj);//结果为&#xff1a;{值一&#xff1a;值二}