vue仿饿了么美团,购物车页面前进刷新,返回数据不变
前进刷新,返回缓存,主要用到keep-alive。
route.js配置好keepAlive
{
path: '/shop/order',
name: 'order',
component: order,
meta:{
type:'login',
keepAlive:true,
showFooter:false
}
},
app.vue中,前者表示缓存,后者表示未缓存,两者都需要存在。
<keep-alive >
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
也可以使用include来实现,include中的值为路由的name。但是多个组件需要缓存时,相对来说没有那么好用
<keep-alive include="shop">
<router-view></router-view>
</keep-alive>
如果在缓存后,返回首页,再次进入要求刷新数据,
可以用钩子函数beforeRouteLeave,如果是a->b,要求a进入b时刷新,且当b进入指定页面才会缓存时。可以在b页面中写上此函数。也可以在a页面中写,在进入指定页面时,改变keepAlive。
beforeRouteLeave(to, from, next) {
if(to.path == '/deal' || to.path == '/shop/estimate' || to.path == '/shop/business'){
from.meta.keepAlive = true;
}else{
from.meta.keepAlive = false;
}
next();
}