vue列表页进入内容页,再返回列表页如何使列表页不刷新,保持原来的数据?

折原娇君
  • 137

问题描述

有这样一个场景,进入列表页之后如图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()中的借口请求数据没有再请求了。。。。请各路大神赐教!

回复
阅读 5k
1 个回答

搞了半天,是我这个<kepp-alive>标签没有包裹对地方。我的页面组成是<app></app>里放整个系统的路由,然后分别有导航栏,侧边栏和内容页,我这边需要缓存的是内容页的组件,所以要在切换内容组件的地方加kepp-alive
图片描述

图片描述

图片描述

图片描述

组件缓存是可以在vue-devtools中看到的,如图

图片描述

宣传栏