keep-alive如何设置跳转指定页面缓存，其它页面不缓存并清除之前的缓存？

作者站长头像
站长
· 阅读数 16

页面跳转详情页然后返回页面是保持之前的状态没问题，跳转其它页面再返回当前页面是初始页面状态也没问题，但再进入详情再返回页面确是第一次的状态，这种情况怎么处理？

beforeRouteLeave(to, from, next) {
    console.log('aaaaaaaaaaaaa', to)
    //此处也可以加判断 
    if (to.name === 'customerAsset_detail' || to.name === 'unmatch') {
        from.meta.keepAlive = true //需要缓存
        to.meta.isBack = true
    } else {
        from.meta.keepAlive = false // 不需要缓存
        to.meta.isBack = false
    }
    next()
},
回复
1个回答
avatar
test
2024-07-14

换个方式完美实现

    mounted() {
        const dataList = JSON.parse(localStorage.getItem('dataList')) //对象格式需要转换一下
        const tags = JSON.parse(localStorage.getItem('tags')) //数组格式需要转换一下
        const page = localStorage.getItem('page')
        if (dataList || tags || page) { //如果有数据就按条件调用接口没有直接调用接口
            this.form = dataList //form表单
            this.tabIndex = tags 
            if (this.form.scopeDate) {
                this.start_time = this.$moment(new Date(this.form.scopeDate[0])).format('YYYY-MM-DD')
                this.end_time = this.$moment(new Date(this.form.scopeDate[1])).format('YYYY-MM-DD')
            } else {
                this.start_time = ''
                this.end_time = ''
            }  
            this.page = Number(page)
            if (tags) {
                this.addBao()
            }
            localStorage.removeItem('dataList') //用完及时清空
            localStorage.removeItem('tag')
            localStorage.removeItem('page')
            if (this.page && this.page > 1) { // 定位table列表第几页的问题
                this.getData(this.page)
            } else {
                this.getList()
            }
        } else {
            this.getList()
        }
        this.labelCenter()
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/statistics/particulars') { //跳转指定页面进行缓存
            const dataList = JSON.stringify(this.form) //对象格式需要压缩存储
            const tags = JSON.stringify(this.tabIndex) //数组格式需要压缩存储
            localStorage.setItem('dataList', dataList)
            localStorage.setItem('tags', tags)
            localStorage.setItem('page', this.page)
        }
        next()
    },
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容