防止在Vue.js中@click上的锚标记重新加载页面

Question

我的 vue 文件中有以下代码。我在这里面临的问题是当我单击此处时页面会重新加载。我添加了event.preventDefault()，但无法解决问题。请帮我找出哪里出错了。

<template>
  <p>Please click <a @click="stopProcess">here</a></p>
</template>

<script>  
  export default {
    methods: {
      stopProcess(){
        event.preventDefault()
        var page = "../../../pages/page.pdf"
        window.open(page);
      }
    }
  };
</script>

Answer 1

如果您在锚标记定义中添加href="javascript:void(0)"，则页面不会重新加载。

这是因为 void 操作符返回未定义，浏览器不执行的结果。有关 void 运算符的更多信息，请参阅here。

例如：<a href="javascript:void(0)" @click="stopProcess">here</a>

Answer 2

所以首先你需要知道@click 不像原生点击事件，所以event.preventDefault() 可能无法按预期工作，你需要使用@click.native 来制作你的原生点击事件。然后你需要将event本身传递给你的处理方法（在vue.js中处理事件的最好方法是使用built-in event handlers，所以你可以去掉event.preventDefault()直接使用@987654329 @ 代替）.

但是所有这些单独并不能解决您的问题，因为默认情况下，如果请求的路由在同一个域中，则当前页面将在 window.open() 发生之后跟随它，因此您需要将第二个值传递给它，以使确保新路径与当前路径不同（它的首选值是_blank）。您可能还需要始终为您的<a> 指明href。

<template>
  <p>Please click <a href="#" @click.native="stopProcess">here</a></p>
</template>

<script>
  export default {
    methods: {
      stopProcess(event) {
        event.preventDefault()
        var page = "../../../pages/page.pdf"
        window.open(page, '_blank');
      }
    }
  };
</script>

---

您还可以通过将<a> 目标设置为_blank 来简化此操作，而无需任何复杂的东西。

<template>
  <p>Please click <a href="../../../pages/page.pdf" target="_blank">here</a></p>
</template>

---

如果您使用的是vue-router，这可能是这样的，而不是上面的：

<template>
  <p>Please click  <router-link to="../../../pages/page.pdf" target="_blank">Home</router-link></p>
</template>

Answer 3

@click.prevent 是正确的方法，但页面仍然会重新加载。

由于stopProcess() 会因为event 未定义而引发异常，所以prevent 修饰符将不起作用。

请删除 event.preventDefault() 并添加 prevent 修饰符，您会看到它正在工作。

Answer 4

根据你的代码我会试试这个，但如果是我，我会使用路由器。

<template>
  <p>Please click <a @click="stopProcess">here</a></p>
</template>

<script>  
  export default {
    methods: {
      stopProcess(){
        var page = window.location.origin + "/pages/page.pdf"
        window.open(page);
      }
    }
  };
</script>

Answer 5

尝试添加prevent修饰符以防止默认行为如下：

  <p>Please click <a @click.prevent="stopProcess">here</a></p>

或者像你一样，但你错过了 event 作为方法参数：

    stopProcess(event){
        event.preventDefault()