vue中keepAlive的用法[返回页面不刷新]
本文转载于時間蒼白了誓言_49b9
使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用
1.在app.vue页面中把
<keep-alive>
<router-view v-if="$route.meta.keepLive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepLive"></router-view>
2.在router中的index.js中,路由配置下加一个meta属性:
{
path: '/',
component: () => import(/* webpackChunkName: 'day-report' */ './views/index.vue'),
meta: {
keepLive: !0
}
},
我的需求是,列表页面到列表详情页跳转后,从详情页回来之后,列表页面不刷新
注意:哪个页面需要缓存,哪个页面加上就行,不需要的不用写
3.在列表详情页,加入下图所示内容:
注意:下面内容加上之后,想要的效果是实现了,但是出现另一个问题,就是无论哪个页面跳到这个列表页面,都不会刷新,显然和所要求的不同。所以需要第四步:
beforeRouteLeave(to, from, next) {
if (to.path === '/') {
if (!from.meta.keepLive) {
from.meta.keepLive = !0;
}
} else {
from.meta.keepLive = !1;
to.meta.keepLive = !1;
this.$destroy();
}
next();
},
4.在列表页加入如下图所示:
需要判断下,如果页面来源是详情页的话,就缓存,
否则,就不缓存,刷新。
beforeRouteLeave(to, from, next) {
if (to.path === '/day') {
from.meta.keepLive = !0;
} else {
from.meta.keepLive = !1;
this.$destroy();
}
next();
},
beforeRouterLeave必须写在有配置路由的页面上才有效的。具体使用方法,可以参考官方文档。