Vue 类前端框架开发的网站，如何在新标签页打开链接

[hicdn]

随着 Vue 的使用范围越来越广，不使用 <a> 标签的程序员越来越多，各种链接都是 <div> <span> 加事件绑定一把梭，还见过用 <button> 的异端。鼠标中键和 Ctrl+鼠标左键完全被废弃。

做为用户，有啥浏览器插件能让链接点击后在新标签页打开。如图所示

[shintendo]

这跟 Vue 有什么关系

[sgiyy]

跟前端框架没关系。
实际中有时也会这么做，比如在新标签页打开或跳转前，需要发起请求或进行校验后才可以执行。
正常不需要校验或发起请求啥的，确实应该用正常的 a 标签。

[C603H6r18Q1mSP9N]

a 标签 target=_blank 可以，直接硬写。
click 里面 window.open(url) 也可

[lalalaqwer]

用户的话应该没办法搞这个事了，毕竟是路由跳转都是在 js 代码里面写的

[Axnir]

跟 Vue 没关系，就是写代码的程序员写的不规范

[libook]

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open

能用 a tag 的时候尽量用 a tag ，需要拦截事件做前置准备的话就监听事件。

你也可以监听 ctrl 键是否被按住，如果同时触发点击操作使用 window.open 打开新页面，否则就 window.location.href 在当前页面跳转。这个你可以用封装成组件在各个地方复用。

建议去 MDN 上刷一遍 Web API 的文档，能给你提供很多解决问题的思路。

[hicdn]

@shintendo
@Axnir
遇到这种乱用标签的网站都是 Vue ，造成了对 Vue 的错误认知。
Jquery 时代也有事件绑定，但是 <a> 标签还是存在的。

[hicdn]

@sgiyy 数据校验是后端的工作。前端校验是因为后端不校验吗？后端有校验的前提下，前端没有必要画蛇添足浪费用户的电能。

[shintendo]

@hicdn 大兄弟，前后端都要校验的，后端校验是为了安全和正确性，前端校验是为了体验，用户不会希望表单填完提交上去跳到结果页被告知填的格式不对，javascript 诞生第一天的最初目的就是做这个

[sgiyy]

@hicdn #8
前后端分离的概念了解吗？现在新项目基本都是前后端分离了，前后端全通过接口交互，你后端怎么新打开标签页？

前端画蛇添足了？但凡多懂点前端的人都不至于这么说，不会就去学哈。

[learnshare]

学一下 Web 基础课吧

<a href="URL" target="_blank">LINK</a>
window.open(URL)

[ccyu220]

现在的前端不会切图就算了，连基础都不会了吗。

[Vegetable]

不要把你的错误认知放大到其他人行吗？
window.open("https://v2ex.com","_blank")

[Vegetable]

单页面开发的网站，有时候没办法实现新标签页打开的功能。设计上没有考虑这一点，比如将某些状态保存在了内存中，直接打开 url 是无法还原状态的。和 vue 没什么关系，和开发者的认知有关系

[sgiyy]

@ccyu220 #12 求求来几个懂点前端的后端的回答吧

[devwolf]

这问题的内容，确实很诡异……

[konakona]

不用 a 标签是为了阻止事件冒泡。
但这种明显只是为了 a 而 a 的标签乱用着实难受……

新开窗口直接<a href="" target="_blank"></a>
事件新开窗口 <div onClick=""></div> function __ (){ window.open('url',"_blank")}

[learnshare]

@Vegetable 其实也可以的，只不过数据处理上可能复杂了一些
比如搜索 /查询参数放在 URL 上，其他数据和正常初始化页面一样就行
但有些应用写成了跳转前后有特殊关联的数据和逻辑，这其实不太好

[devwolf]

#16 @devwolf 有歧义，只是想吐槽一下"op 的这例提问"本身让我个人觉得诡异。

op 可以去 mdn 看一下超链接相关的知识，属于 html 范畴：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

以及 window.open：
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open

还有 window.location.href：
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location

[Quarter]

@hicdn 我觉得你这就有点不科学了，强行用结果来推倒原因，因为你看到很多网站乱用标签，并且用了 vue ，所以就是 vue 导致的标签乱用，不觉得有些玩笑了嘛

乱用标签单纯的是因为开发者开发的不规范，至于为什么是 vue ，那是因为现在很多中小型项目都是 vue 开发的，框架上的上手门槛也比较低，很多人稍微看几天就开始写了，也没有相应的规范来约束，所以才导致的这个情况