vue对访问记录的管理
当用户进入一个页面的时候,会往 history 栈中放入当前的记录,对页面级别的操作通过操作内置对象 history 可以满足一些需求。
vue 路由跳转就是通过对 history.pushState()
和 history.replaceState()
方法的模拟来实现,会往 history
栈中存放一条记录,这也是为什么 vue 的 router.push
方法只能在支持 history.pushState()
方法的浏览器中使用,当调用 router.go()
或者 router.back()
方法的时候就和 history.go()
、history.back()
效果一样,都是对 history
栈中的记录进行访问,上述行为与通过浏览器的回退和前进效果也是一样。
但是,在不加处理的情况下,组件的滚动行为会跟我们想象的不同。
为什么有的页面的滚动会影响到其他页面
为基于SPA模式开发,所以页面仅有一个,实现页面切换是利用哈希与组件的映射关系,vue-router 是通过哈希来模拟完整的 url,但是对于页面来说仍是一个 url,所以在任何一个组件滚动页面,切换到其他组件的时候,页面仍保持滚动之前的状态,这就是出现上述现象的原因。
如果你是想简单粗暴的在每次切换组件的时候让页面回到顶部,router.beforeEach() 导航守卫会是一个不错的选择: