vue-router-keep-alive及其他问题和属性介绍

vue-router-keep-alive及其他问题和属性介绍

keep-alive遇见vue-router

keep-alive是Vue内置的一个组件,可以使用被包含的组件保留状态,或避免重新渲染。
它里面有两个非常重要的属性:
1.include - 字符串或正则表达式,只有匹配的组件会被缓存
2.exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存:

	<!--正则表达式里面不能随便加空格,这里的都好后面也不要加空格-->
    <keep-alive exclude="Profile,User">
      <router-view></router-view>
    </keep-alive>

通过create生命周期函数来验证

1.生命周期函数回顾:mounted、 created、activated、deactivated、destroyed
2.keep-alive -> activated/deactivated,这两个函数,只有该组件被保持了状态使用了keep-alive时,才是有效的
3.首页中使用path属性记录离开时的路径,在beforeRouteLeave中记录。
使用了keep-alive页面都不会被频繁的创建和销毁,

展开阅读全文
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值