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
方法,直接参照官方文档改一下就行