需求
首页 列表页 详情页
首页进入列表页 列表页进入详情页
详情页返回列表页 滚动条在相应位置
列表页返回首页 首页进入列表页 在最上面
第一步 在app中设置需要缓存的div
//缓存的页面
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//不缓存的页面
<router-view v-if="!$route.meta.keepAlive"></router-view>
第二步 在路由router.js中设置.vue页面是否需要缓存
{
path: '/firstPage',
name: 'firstPage',
component: firstPage,
meta: {
isBack: false // 用于判断上一个页面是哪个
}
},
{
path: '/list',
name: 'list',
component: list,
meta: {
keepAlive: true, // 此组件需要被缓存
isBack:false // 用于判断上一个页面是哪个
}
},
{
path: '/detail',
name: 'detail',
component: detail,
meta: {
isBack:false // 用于判断上一个页面是哪个
}
}
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。
当再次进入(前进或者后退)时,只触发activated。
第三步 list.vue
beforeRouteEnter(to, from, next) {
if (from.name === 'detail') {
to.meta.isBack = true
}
next()
},
// 初始化时执行
activated() {
// 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
if (!this.$route.meta.isBack) {
scrollTop 为0
} else {
scrollTop 为200
}
// 恢复成默认的false,避免isBack一直是true,导致下次无法获取数据
this.$route.meta.isBack = false
},
// 页面离开时执行
deactivated() {
// 页面离开时获取距离 例 200
}