Vue.js Vue路由器导航到同一路由失败

可以在中找到代码片段，抱歉在外部发布代码，当我单击导航链接时，stackoverflow代码块始终在“/”应用程序中返回服务器错误

重现问题的步骤：

点击Foo

点击Foo-3

向上滚动

重复步骤2

预期的行为是向下滚动到Foo-3，就像第一次一样，但它实际上保持在相同的位置，不会滚动到Foo-3

在这种情况下，如果我先单击Foo-3，然后向上滚动并再次单击Foo-3，如何强制它滚动到Foo-3

提前谢谢

编辑：由于stackoverflow中的路径错误，代码段在stackoverflow中不起作用，请参阅我发布的js fiddle链接。我没有创建此代码，但我在这里遇到了完全相同的问题。我在Github上没有找到解决方案，所以我来这里寻求帮助。如果有什么问题，请大声说出来

var FooComponent={
模板：“#foo模板”
};
变量路由=[{
路径：'/foo'，
组件：FooComponent
}];
var scrollBehavior=函数（到、从、保存位置）{
if（to.hash）{
返回{
选择器：to.hash
}
}否则{
返回{
x:0,，
y:0
}
}
};
var路由器=新的VueRouter({
路线:路线,，
滚动行为：滚动行为，
模式：“历史”
});
var app=新的Vue({
el:“#应用程序根”，
路由器：路由器
});

发行复制
福
导航
Foo-1
Foo-2
Foo-3
Foo-1





Foo-2





Foo-3





使用片段标识符时，这是很常见的，但不限于Vue.js。您可以通过更改哈希来解决此问题。这是本期将不会再版的杂志

在演示中，我添加了一个侦听器，以便侦听scroll事件，并让哈希根据最后一个元素进行更改

我希望它能给你一个提示

var FooComponent = {
  template: '#foo-template',
  mounted() {
    const switchHash = () => {
     Array.from(document.querySelectorAll('h2')).forEach(h2 => {
       if(h2.offsetTop < window.pageYOffset && h2.offsetTop + h2.clientHeight > window.pageYOffset) {
         window.location.hash = h2.id;
       }
     });
    };
    window.addEventListener('scroll', switchHash);
  }
};

var FooComponent={
模板：“#foo模板”，
安装的（）{
常量switchHash=（）=>{
Array.from（document.querySelectorAll（'h2'））.forEach（h2=>{
if（h2.offsetTopwindow.pageYOffset）{
window.location.hash=h2.id；
}
});
};
window.addEventListener（'scroll'，switchHash）；
}
};
即使您的代码没有在StackOverflow代码段中运行，也最好在此处包含您的代码。当然，我们会在一秒钟内添加它。您真正要问的是，当链接中的哈希值已经与URL完全匹配时，如何跳转到某个位置。不仅仅是散列链接，如果点击同一个页面链接，正常的网页行为是重新加载页面，但是当使用vue路由器时，如果链接已经匹配URL，它实际上什么也不做，只是想知道如何使它像正常的网页一样工作：）有人找到了解决方案吗？这个解决方案在Firefox上的可用性很差。此浏览器在更改时会跳转到每个定位点，因此当用户滚动页面时，它将继续跳转。