Intrapage 锚标记在 FF / Safari 中不起作用

Question

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/) 的 fiddle 正在工作所以我猜这是一个 Vue-Router 问题？更改为路由器-link 并未解决问题。

Answer 1

问题出在我的 Vue-Router 设置中，我添加了滚动到哈希的行为并解决了 FF/Safari 的问题，但不知道为什么它在 Chrome 中有效。

  scrollBehavior: function (to, from, savedPosition) {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return { x: 0, y: 0 }
    }
  },

Intrapage 锚标记在 FF / Safari 中不起作用

Intrapage anchor tags not working in FF / Safari

vue.js

vue-router