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

Question

沙盒在这里。

我在<li>元素中组织了链接。在单击事件中，我将页面的 URL 更改为页面中相应的<div>id 元素。

现在，所以我正在寻找一种在makeIt()中触发输入 press 事件的方法，以便我滚动到相关的<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，因此在定义路由器选项时，您可以利用路由的哈希属性和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上保存了此解决方案的一个版本，您可能想在沙盒或应用程序的本地版本上尝试一下。