我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
keep-alive 缓存指定路由
一般情况下,keep-alive会对组件进行缓存,然后下次进入的时候使用的是缓存,从而节省性能,但是也会有一定的问题,就是如果你的路由页面有分子路由,用户此时进入到了子路由b,而我们默认路由时a。
这就导致当我们利用路由跳转的时候,即便跳的是子路由a,但是因为缓存的问题,导致进入的是b,因为b被缓存了。
解决办法:
利用meta标签来判断,是否需要缓存,这就需要在每个路由配置上设置一个属性:
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->
减少使用meta
在每个路由上使用meta标签来判断实在是太麻烦了,有时候某一个大路由都不需要缓存,我们可以使用路由的matched属性。
- 一个数组,包含当前路由的所有嵌套路径片段的路由记录
- 一个路由匹配到的所有路由记录会暴露为
$route
对象 (还有在导航守卫中的路由对象) 的$route.matched
数组
意思就是这个数组包含了当前路由所有的嵌套记录,也就是说除了子路由信息,还可以访问到父路由信息,那么我可以给父路由设置一个meta信息,子路由就可以不用设置了。
然后通过matched属性来判断:
this.$route.matched.some(r => r.meta.keepAlive);
some方法会遍历这个数组,然后判断每个路由片段里面的meta标签是否有keepAlive,有则返回true,无则false。
我们也可以给父路由设置keepAlive:false
,这样some会直接拿到这个布尔值,也是可以达到要求的。
也就是说使用该方式,路由设置keepAlive为false或者不写,都可以理解为不缓存。
动画
如果对这个路由使用了动画,那么你需要写两次了。
<transition name="van-slide-up" mode="out-in">
<keep-alive>
<router-view v-if="isKeepAlive"></router-view>
</keep-alive>
</transition>
<transition name="van-slide-up" mode="out-in">
<router-view v-if="!isKeepAlive"></router-view>
</transition>
缓存的写一个,不缓存的写一个。
0
评论(0)