vue列表页进入内容页,再返回列表页如何使列表页不刷新,保持原来的数据?
问题描述
有这样一个场景,进入列表页之后如图4,什么也没有,然后我选择学校之后,列表数据才会出来(图2),点击图2查看进入图3,图3点击返回按钮进入图4了,是想要图2的效果(选择学校封装的组件,学校也是从接口请求来的(activated),返回按钮点击之后,学校数据也没有了)
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
App.vue
<router-view v-if="!$route.meta.keepAlive"></router-view>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
路由route:
{
path: '/questionnaire/dataToPerson/:psqId',
component: _import('questionnaire/dataToPerson'),
name: '统计报表',
meta: {
level: 1,
keepAlive: true, // 此组件需要被缓存
requireAuth: true,
isBack: false // 用于判断上一个页面是哪个
}
}, {
path: '/questionnaire/answer/:psqId/:cardCode',
component: _import('questionnaire/answer'),
name: '答卷详情',
meta: {
level: 2,
keepAlive: false,
isBack: false
}
}
列表页请求数据:
beforeRouteEnter(to, from, next) {
console.log('datapage', from)
if (from.name === '答卷详情') {
to.meta.isBack = true
}
next((vm) => {
console.log('vm', vm)
})
},
created() {
this.isFirstEnter = true
},
activated() {
if (!this.$route.meta.isBack || this.isFirstEnter) {
// 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
// 如果isFirstEnter是true,表明是第一次进入此页面或用户刷新了页面,需获取新数据
// 把数据清空,可以稍微避免让用户看到之前缓存的数据
this.psqId = this.$route.params.psqId;
this.getFinishedCnt()
this.getDutyList()
}
// 恢复成默认的false,避免isBack一直是true,导致下次无法获取数据
this.$route.meta.isBack = false
// 恢复成默认的false,避免isBack一直是true,导致每次都获取新数据
this.isFirstEnter = false
},
详情页请求数据:
beforeRouteEnter(to, from, next) {
console.log('to', to)
next(vm => {
// 通过 `vm` 访问组件实例
console.log('vm', vm)
vm.getDutyList(to.params)
})
},
beforeRouteLeave(to, from, next) {
to.meta.keepAlive = true
if (this.reload) {
to.meta.keepAlive = false
}
next()
},
你期待的结果是什么?实际看到的错误信息又是什么?
期望返回之后看到的页面保留之前的数据,但是返回按钮进去的列表页数据被清空了,但是写在activated()中的借口请求数据没有再请求了。。。。请各路大神赐教!
搞了半天,是我这个<kepp-alive>标签没有包裹对地方。我的页面组成是<app></app>里放整个系统的路由,然后分别有导航栏,侧边栏和内容页,我这边需要缓存的是内容页的组件,所以要在切换内容组件的地方加kepp-alive
图片描述
组件缓存是可以在vue-devtools中看到的,如图