`updated () {`
` this.$nextTick(<span class="hljs-function"><span class="hljs-keyword" style="font-weight:bold;"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function">(</span><span class="hljs-params"></span><span class="hljs-function"><span class="hljs-params"></span>)</span></span>{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code style="font-family:'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;color:inherit;background:none;"> <span class="hljs-keyword" style="font-weight:bold;"><span class="hljs-keyword">let</span></span> position = <span class="hljs-keyword" style="font-weight:bold;"><span class="hljs-keyword">this</span></span>.$store.state.position //返回页面取出来`
` window.scroll(0, position)`
`})`
`}`
用updated 或者 beforeUpdate 钩子都可以 代码都写在要保存滑动距离的界面
**方法三：用默认的hash模式的**
**一个list页点击进入detail页，我在这时记录下list页滚动条的位置，然后在detail页返回到list页时设置滚动条位置为刚才保存那个值。
**
`// list页route中的data钩子`
`route : {`
` data : function () {`
` var _this = this;`
` // 返回同一个位置`
` var scrollTop = sessionStorage.getItem("scrollTop");`
` if (scrollTop) {`
` _this.$nextTick(<span class="hljs-function"><span class="hljs-keyword" style="font-weight:bold;"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> (</span><span class="hljs-params"></span><span class="hljs-function"><span class="hljs-params"></span>) </span></span>{</code></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><code style="font-family:'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;color:inherit;background:none;"> $(".abuild-record-layout").scrollTop(scrollTop);`
` });`
` }`
` }`
`}`
[$nextTick]( )将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 `Vue.nextTick` 一样，不同的是回调的 `this` 自动绑定到调用它的实例上。
方法四：scrollBehavior方法
1.router文件中设置为 mode: ‘history’, 模式
2.router设置
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
3.详情页返回列表页时， 用 history.back() 返回
### 最后
我可以将最近整理的前端面试题分享出来，其中包含**HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法**等等，还在持续整理更新中，希望大家都能找到心仪的工作。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
**篇幅有限，仅展示部分截图：**
