vue项目的滚动行为

场景：在项目中，当从列表中输入详细信息，然后从详细信息返回列表时，您希望直接定位您离开的位置。

单击其中一个列表页面进入详细信息页面：

进入详细信息页面：

单击详细信息页面，返回列表页面的离开位置：

实现模式1: html5历史模式

1在路由设置router/index.js中，缓存了设置组件的元信息。(keepAlive:true)，并将模式模式修改为历史记录。

导出默认新路由器({ mode : ' history '/default hashroutes 3360[//* * * * * * * * * * * * * * * * * *列表组件* * * * * * * * * *//)名称：列表，组件3360列表，元： {keepalive:True}} 2此组件路由的匹配和显示方式：

keep-alive router-view v-if=' $ route . meta . keep alive '/router-view/keep-aliver outer-view v-if='！$ route . meta . keepalive '/router-view实现模式2: monitor scrollTop，js原始写入(组件还需要设置cache keepalive)

1在组件的数据中定义一个scrollTop属性，用于记录被监控的scrollTop。

在创建或安装的钩子中添加一个监听事件。

已装入(){文档。addeventlistener ('scroll '，这。handelscroll)}，3在methods方法中定义了这个handelscroll方法，并将被监控的scrollTop分配给数据中的scrollTop()

handels croll(){这个。scrolltop=document . body . scroll top | | document . document element . scroll top | | window . page offset }，4在停用的钩子中记录当前的scroll top(即从列表页面进入详细信息页面)

deactivated(){ sessionstorage . setitem(' scroll top '，这。scrolltop)}，它存储在sessionstorage中，也可以使用状态管理。

5在激活的钩子中，找到保存的scrollTop(也就是说，从详细信息页面返回到列表页面)

activated(){ document . body . scroll top=document . document element . scroll top=window . pageyoffset=session storage . getitem(' scroll top ')}，以上vue通过滚动行为实现了从列表到细节，而返回列表原始位置的方式就是边肖分享的全部内容，希望能给大家一个参考和支持我们。