当我们在用vue进行开发时，除了用vue-router配置路由，其次经常使用是router实例方法和<router-link>进行跳转。但有一些时候我们可以用到vue-router提供的其他接口来提高用户体验。

试想一下这样的场景：页面底部有一些列表，点击列表中元素跳转到详情页，可当详情页高度足够长的时候，滚动条会停留在上一个页面所处位置。具体场景如下图：

当我从home页点击某元素查看详情时，about页面滚动条停留在上个页面的位置，导致用户根本不是从顶部开始浏览。解决方案就是利用vue-router提供的scrollBehavior，需要在router.js中配置

// savePosition会记录当前页面的滚动位置，可以通过返回值滚动到相应位置
scrollBehavior: (to, from, savePosition) => {
 // 如果savePosition存在，则直接滚动到相应位置
 if (savePosition) {
   return savePosition
 }
 // 否则直接回到顶部
 return {x: 0, y: 0}
}

这样的话，当跳转到about页面发现没有滚动过，则直接滚动到顶部。而且返回home页面还会停留在下方列表处。如图

但实际上，现在的列表页是写死的，所以在返回时会有savePosition，可以直接滚动到列表位置，进行重新的选择。当列表页是通过异步获取到的，请求成功后会重新赋值list，导致savePosition失效，直接回到顶部。我们可以利用setTimeout进行模拟

created () {
 this.list = 0
 setTimeout(() => {
 this.list = 10
 }, 10)
}

这时，查看详情后返回则直接回到顶部，用户体验又下降了一个档次 如图：

那怎么解决呢？也很简单，通过keep-alive组件缓存当前路由。这样再返回时不会进行请求。列表不会重绘。但这里还是有问题的。当home页面也需要接受参数时，路由参数切换时，缓存后的home页面也不会请求。这就不是单单的用户体验问题，而算是个bug啦。这时，我们还可以再使用vue-router的导航守卫，beforeRouteUpdate来进行请求数据。

beforeRouteUpdate (to, from, next) {
 // 当路由参数切换时，请求数据
 this.getData()
 next()
}