如何在URL哈希修改時觸發Enter鍵按事件？

Question

沙盒在這里。

我在<li>元素中組織了鏈接。 在單擊事件上，我將頁面的URL更改為頁面中相應的<div> id元素。

現在，所以我正在尋找一種方法來觸發makeIt()的輸入按下事件，以便我滾動到相關的<div>元素。

這是我的代碼：

<template>
<div>
  <div style="margin-top: 50px;"></div>
  <div style="margin-bottom: 50px;">
    <ul>
      <li
        v-for="i in 3"
        :key="i"
        @click="makeIt(i)"
      >
        Link{{ i }}
      </li>
    </ul>
  </div>
  <div
    v-for="i in 3"
    :id="i"
    :class="`div${i}`"
    >
    Div {{ i }}
  </div>
</div>
</template>

<script>

export default {
  methods: {
    makeIt(hashbang) {
      this.$router.push(`#${hashbang}`)
    }
  }
}
</script>

<style>
.div1 {
    background-color: red;
    height: 600px;
}

.div2 {
    background-color: blue;
    height: 500px;
}

.div3 {
    background-color: yellow;
    height: 500px;
}
</style>

如何實現這一目標？

Answer 1

您可以從模板傳遞$event對象並將makeIt函數修改為;

HTML ：

@click="makeIt(i, $event)"

JS ：

makeIt(hashbang, event) {
if (event.keyCode === 13) {
//do something
}
      this.$router.push(`#${hashbang}`)
    }

Answer 2

我不完全確定觸發Enter鍵是正確的做法，以便向下滾動到所需的部分。

您可以考慮使用VueScrollTo處理滾動（您可以在此處找到它）。 然后就像在makeIt方法中調用VueScrollTo.scrollTo()一樣簡單。

makeIt(hashbang) {
  this.$router.push(`#${hashbang}`);
  VueScrollTo.scrollTo(`.section-${hashbang}`, 500);
}

以下是我將如何做的一個工作示例： jsfiddle 。

然后，您可能仍希望將索引推送到路徑，以便在瀏覽到確切的URL時到達所選部分。

---

編輯我的答案以建議不同的方法：

由於您正在使用VueRouter，因此在定義路由器選項時，您可能會利用routes的hash屬性和scrollBehavior()方法。 這樣你就可以得到這樣的東西：

<router-link tag="li" v-for="i in 3" :key="i" :to="{ name: 'theRouteName', hash: '#section-' + i }">Link {{i}}</router-link>

這使得$router.push()部分和整個makeIt()方法makeIt()不必要。

此外，您應該將滾動行為添加到路由器配置：

const router = new VueRouter({
  routes,
  mode: "history",
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {˙
      return savedPosition;
    }
    if (to.hash) {
      return { selector: to.hash };
    }
    return { x: 0, y: 0 };
  }
});

我在jsfiddle上保存了這個解決方案的一個版本，您可能想在沙箱或本地版本的應用程序上嘗試它。