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

Posted 2023-02-23

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

【英文标题】：Prevent anchor tag reloading page on @click in Vue.js

【发布时间】：2020-11-18 10:37:15

【问题描述】：

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

【问题讨论】：

你为什么使用window.open？

@LeonardoBezerra 因为我想在点击时在新标签中打开页面

window.open 仅适用于绝对链接，使用 https。 "yourdomain.com/pages/page.pdf"

是的，就像 @LeonardoBezerra 它只适用于 http 协议，您还应该添加 'blank' 作为第二个参数以在新标签中打开它

你在这里的真正意图是什么？下载pdf？

【参考方案1】：

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

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

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

【参考方案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>

【参考方案3】：

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

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

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

【讨论】：

“A”标签不会导致页面重新加载，因此 prevent 只会阻止页面滚动到页面顶部。

【参考方案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>

【讨论】：

这适用于我的应用程序，如果您安装了路由器，它将无法正常工作

是的，我已经安装了路由器。

你建议如何将它与路由器一起使用？

你可能想签出这个而不是pdftron.com/blog/webviewer/how-to-build-a-pdf-viewer-with-vuejs

【参考方案5】：

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

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

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

    stopProcess(event)
        event.preventDefault()

【讨论】：

这可能是真的，但这不是重新加载的原因

@LeonardoBezerra 为什么？

@user12763413 你试过了吗<a href="../../../pages/page.pdf" target="_blank">here</a>

它用 pdf 文件或旧内容重新加载？

pdf文件在下一页打开，但我点击的页面被重新加载