需求如下:
列表页筛选数据后跳到详情页,再返回列表页后页面不能刷新,需保留之前筛选的数据
- router.js中添加meta属性,keepAlive标记是否开启缓存,isBack标记是否从详情页跳转返回
{
path: '/map',
name: 'map',
component: () => import('@/views/map/index'),
hidden: true,
meta: {
keepAlive: true,
isBack: 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>
- 组件中通过beforeRouteEnter进行路由守卫
beforeRouteEnter(to, from, next) {
if (from.path === '/detail') {
to.meta.isBack = true
} else {
to.meta.isBack = false
}
next()
},
activated() {
if (!this.$route.meta.isBack) {
this.getData()
}
this.$route.meta.isBack = false
}