一、先决条件
1.vue框架
2.使用keep-alive keep-alive的vue官网链接
一、两种情况
1.第一种情况:从列表跳转到详情,详情页只供查看,不需要编辑,因此跳转回去的时候不需要更新页面数据
2.第二种情况:从列表跳转到详情,详情页需要编辑,因此跳转回去的时候需要更新页面数据
二、代码
情况一
1.设置 keep-alive
2.从列表页跳转至详情页:离开路由前记录滚动条位置
3.从详情页跳回到列表页:activated生命周期下控制滚动条位置
情况二
1.设置 keep-alive
2.从列表页跳转至详情页:离开路由前记录滚动条位置/(如果有分页或者具体的条件,如状态信息)保存条件信息
3.从详情页跳回到列表页:activated生命周期下控制滚动条位置/获取条件信息
4.activated生命周期下更新列表数据
1.设置keep-alive
页面的入口vue文件中:
<template>
<div id="app">
<keep-alive include="xx1,xx2,xx3">
<router-view>