Question

在我的组件中，我安装了一个名为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

Answer 1

从#开始（在URL中）的所有内容都称为hash。浏览器将其用于导航和输入参数。浏览器可以更改哈希，而无需向服务器提交新请求。

很有可能是实施SmoothScroll的方式，并且是必需的。如果滚动到2个链接，则可以使用前进和后退导航，或为链接创建书签。

即使没有插件，浏览器和URL导航到内部链接时也会使用hash。

除非您有充分的理由将其删除，否则我将忍受它。

Answer 2

为防止href默认行为更改URL。您可以侦听click事件，然后调用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属性。

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

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

2 个答案: