如何在URL哈希修改时触发Enter键按事件？

Question

Sandbox here.

我在<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处理滚动（您可以找到它here）。然后就像在VueScrollTo.scrollTo()方法中调用makeIt一样容易。

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

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

然后，您可能仍希望将索引推送到路径，以便在浏览到确切的URL时到达所选部分。

---

编辑我的答案以建议不同的方法：

由于您正在使用VueRouter，因此在定义路由器选项时，您可能会利用路由的哈希属性和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()方法不必要。

此外，您应该将滚动行为添加到路由器配置：

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上保存了此解决方案的一个版本，您可能想在沙盒或本地版本的应用程序上尝试它。