时间戳

首页 > 解决方案 > 如何防止href默认行为更改URL名称Vue js

javascript - 如何防止href默认行为更改URL名称Vue js

问题描述

在我的组件中，我安装了一个名为 vue2-smooth-scroll 的依赖项，它允许我根据 id 滚动到目标元素。这是实现这一目标的代码：

<a href="#test" class="mouse-icon" @click.prevent="preventDefault" v-smooth-scroll>

我能够滚动到 ID 为 #test 的元素，如以下代码所示

<div id="test"></div>

但是，我注意到 id “test” 将附加在 URL 的末尾。你如何阻止这种情况发生？例如，

http://localhost:8081/#/test

标签： javascriptvue.js

解决方案

防止 href 默认行为更改 URL。您可以侦听单击事件然后调用preventDefault，或者在 VueJS 中您可以添加阻止单击修饰符。

就像：

<a href='#test' @click.prevent>Anchor</a>

但这不适用于您的情况，因为vue2-smooth-scroll故意在 URL 上设置哈希。正如您在第48行和第70行的源代码中看到的那样。

所以你可以把它弄回来，但它需要在动画完成之后。

<template>
  <a href='#test' @click='setUrlBack' v-smooth-scroll>Anchor</a>
</template>

<script>
  setUrlBack () {
    setTimeout(() => {
      history.replaceState(null, null, ' ')
    }, 550) // animation duration + a little delay
  }
</script>

嗯，这是一个非常糟糕的主意。

另一种选择是要求作者添加诸如no-hash属性之类的支持。

或者只是创建自己的插件文件，然后复制代码，粘贴并修改它。

推荐阅读