I have a nav bar structured as follows:
<template>
<div>
<div>
<ul>
<li>
<a href = "#contact">Contact</a>
</li>
<li>
<a href = "#toAbout" >About</a>
</li>
<li>
<a href = "#toProperties">Properties</a>
</li>
<li>
<a href = "#toHome">Home</a>
</li>
</ul>
</div>
<div style="height: 1000px">
</div>
<p id="contact">
Contact
</p>
<p id="toAbout">
About
</p>
<p id="toProperties">
Properties
</p>
<p id="toHome">
Home
</p>
</div>
</template>
<script>
</script>
<style>
</style>
如果我点击Chrome中的锚点,它可以正常工作,但FF / Safari需要双击(第一次点击会将URL更改为/ home #id,第二次点击会将它们带到ID。
基本HTML(https://jsfiddle.net/370bvmb5/1/)的小提琴正在运行,所以我猜这是一个Vue-Router问题?更改为router-link并没有解决问题。
答案 0 :(得分:1)
问题出在我的Vue-Router设置中,我添加了滚动到哈希的行为,这解决了FF / Safari的问题,不知道为什么它在Chrome中有效。
scrollBehavior: function (to, from, savedPosition) {
if (to.hash) {
return {selector: to.hash}
} else {
return { x: 0, y: 0 }
}
},