海纳百川

vue keep-alive

2020-06-08  本文已影响0人  凛冬已至_123

vue使用中经常需要缓存当前页面,比如当从商品页跳转到支付页,需要缓存当前页面
在vue使用中,我用到的方法有两种
1.v-if

<div v-if='isShowInfo'>主页</div>
<data-info v-else/>

这种方式会重新渲染页面,但不会重新加载数据,如果你希望不重新渲染,可以v-if配合v-show实现
2.keep-alive
先展示之前的通用写法

<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

现在的写法

<keep-alive :include="keepAliveComponents">
    <router-view></router-view>
 </keep-alive>

建议用第二种,操作更方便.
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。亲测如果组件不写name属性,那么默认会被缓存,所以使用第二种方法一定要写好name
对于滚动条位置,vue-router 提供了scrollBehavior方法,直接参照官方文档改一下就行

上一篇 下一篇

猜你喜欢

热点阅读