vue-router踩坑之history模式的scrollBehavior_vue3设置scrollbehavior不生效-优快云博客

本文链接：https://blog.youkuaiyun.com/yu2015java/article/details/78715028

本文探讨了在Vue-router中使用history模式时遇到的问题，包括页面刷新导致的滚动位置丢失和微信中a标签与window.open()的行为差异。解决方案包括使用this.$router.push()替换location.href来改变URL，以及在scrollBehavior中处理滚动位置。当遇到打包后history模式下页面空白的问题，作者发现去掉history模式或使用scrollBehavior函数可以解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-router默认模式是hash,该模式下微信和部分浏览器不会保留页面的滚动位置，例如从列表页到详情页，再返回列表页，会自动回到列表页顶部，显然很多情况下这并不是我们想要的，希望回到的是原来浏览到的位置；history模式下有 new Router({
mode: 'history',
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
if (savedPosition) {
return savedPosition
}
else {
return { x: 0, y: 0 }
}

可以实现保留浏览位置的效果

过程中用了传统的直接改location.href,但该模式下，若页面中有通过js直接改locaion.href的情况，则会出现那个页面一直在类似刷新的状况。

解决：通过this.$router.push()的方式来改变url以及url中的参数

微信与浏览器差异：

js中写windows.open()和直接用a标签微信中效果不一样：：window.open()效果是调到页面，让用户选择复制链接地址，而a标签是直接在当前页面打开

但是，npm run build时遇到问题：index.html打开后一片空白，也没任何报错，原因：

https://router.vuejs.org/zh-cn/essentials/history-mode.html webpack 打包vue-router为history 打开空白没报错

去掉history模式，打包后传到服务器发现可以保留列表原来停留的地方。。。。。

测试发现：

scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
if (savedPosition) {
// alert(savedPosition.y);
return savedPosition
}
else {
return { x: 0, y: 0 }
}
},
这段代码在history模式下也是有记录原来停留位置的功能的，如果注释掉该段代码，就会不能回到原来浏览的位置。

实际情况如此，但官网说是只有在history模式下