需求:
产品经理在列表页(几千个数据,n个page)点击某一项进去到详情页后,再返回到列表页发现页面回到了第一页,找不到之前的查看的是哪一条了,为了方便咋公司产品经理,返回列表页时需要记住之前的page页
解决思路:
在列表页点击某一条进入详情页的时候,触发当前页面的keep-alive缓存页面
解决步骤:
- 设置路由
需要缓存的路由设置 keepAlive : true, 不需要缓存的路由设置 keepAlive: false
router index.js
[
{
path: '/dm',
component: Layout,
redirect: '/dm/basic',
name: '设备中心',
meta: {
title: '设备中心',
icon: ''
},
children: [{
path: 'basic',
name: 'Basic',
component: Basic,
meta: {
title: '设备管理',
keepAlive: true // 需要缓存
}
}, {
path: 'basic/decDetail',
name: 'DeviceDetail',
component: DeviceDetail,
meta: {
title: '设备详情',
level: 2,
hidden: true,
keepAlive: false // 不需要缓存
}
}]
},
...
- 列表页
Bacic.vue
activated() {
//只刷新数据,不改变整体的缓存
this.getList()
},
mounted () {
this.getProductName()
},
//修改列表页的meta值,false时再次进入页面会重新请求数据。
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false
next()
},
...
- 详情页
basicDetail.vue
...
mounted () {
},
// 从详情页返回主页时把主页的keepAlive值设置为true(要做个判断,判断是不是返回到主页的)
beforeRouteLeave (to, from, next) {
if (to.name === 'Basic') {
to.meta.keepAlive = true
} else {
to.meta.keepAlive = false
}
next()
},
...
- 这样既可以保证keepAlive缓存了页面,也可以保证再次进入缓存时刷新数据
activated() { //激活keep-alive缓存
this.getList() // 只刷新数据, 不改变整体的缓存
},
deactivated () { //清除keep-alive的缓存
// this.$destroy(true)
},