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

我的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>

请点击这里

导出默认值{
方法：{
停止进程（）{
event.preventDefault（）
var page=“../../../pages/page.pdf”
窗口。打开（第页）；
}
}
};

尝试添加

prevent

修饰符以防止默认行为，如下所示：

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

---

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

请点击这里

导出默认值{
方法：{
停止进程（）{
var page=window.location.origin+“/pages/page.pdf”
窗口。打开（第页）；
}
}
};

@单击。阻止

是正确的方法，但仍将重新加载页面

由于未定义

事件

，因此

stopProcess（）

将引发异常，

阻止

修饰符将不起作用

---

请删除

事件.preventDefault（）

并添加

预防

修饰符，您将看到它正在工作。

因此首先您需要知道

@click

的行为与本机click事件不同，因此

事件。preventDefault（）

可能无法按预期工作，您需要使用

@click.native

创建本机单击事件。然后，您需要将

事件本身传递给处理程序方法（在vue.js中处理事件的最佳方法是使用，因此您可以去掉
事件.preventDefault（）
，直接使用
@click.prevent
）

但是所有这些都不能解决您的问题，因为默认情况下，如果请求的路由在同一个域中，当前页面将在发生后跟随它，因此您需要将第二个值传递给它，以确保新路径与当前路径不同（首选值为
\u blank
）。您还可能始终需要为您的

导出默认值{
方法：{
停止进程（事件）{
event.preventDefault（）
var page=“../../../pages/page.pdf”
打开（第页“空白”）；
}
}
};


通过将目标设置为
\u blank
，您也可以在不使用任何这些复杂内容的情况下简化此操作


请点击



如果您使用的是
vue路由器
，则可能是这样的，而不是上面提到的：


请点击主页

如果在锚定标记定义中添加
href=“javascript:void（0）”
，则页面将不会重新加载

这是因为void操作符返回undefined，而浏览器不会对其执行操作。有关void操作符的详细信息，请参见

例如：
为什么要使用window.open？@Leonardobezera，因为我想在clickwindow的新选项卡中打开页面。open仅适用于使用https的绝对链接。“”是的，就像@Leonardobezera一样，它只适用于http协议，您还应该添加
“blank”
作为第二个参数，在新选项卡中打开它。您的实际意图是什么？下载pdf？这可能是真的，但这不是reload@LeonardoBezerra为什么？@user12763413您尝试过用pdf文件或旧内容重新加载它吗？pdf文件会在下一页打开，但我单击的页面会重新加载。这适用于我的应用程序，如果您安装了路由器，它将不起作用是的，我安装了路由器。您建议如何将其与路由器一起使用？您可能希望签出此标记，而“A”标记不会导致页面重新加载，因此“阻止”只会阻止页面滚动到页面顶部。
    stopProcess(event){
        event.preventDefault()