如何在 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）。那么它就像在makeIt 方法中调用VueScrollTo.scrollTo() 一样简单。

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

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

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

---

编辑我的答案以提出不同的方法：

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

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

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