V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
hicdn
V2EX  ›  问与答

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

  •  
  •   hicdn · 105 天前 · 1465 次点击
    这是一个创建于 105 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    第 1 条附言  ·  105 天前
    遇到这种乱用标签的网站都是 Vue ,造成了对 Vue 的错误认知。
    Jquery 时代也有事件绑定,但是 <a> 标签还是存在的。
    第 2 条附言  ·  105 天前
    各位回复 "a 标签 target=_blank" 和 "window.open" ,注意审题,我是用户,我不是网站开发,我无法控制网站内容。

    回复“前后端分离”、“单页应用” 无法提供新标签页的诸位,
    https://twitter.com/ 也是单页应用,日常的各种信息展示系统,很多是这种列表结构吧,twitter 的列表详情是可以在新标签页打开的。
    20 条回复    2022-03-17 12:34:14 +08:00
    shintendo
        1
    shintendo  
       105 天前
    这跟 Vue 有什么关系
    sgiyy
        2
    sgiyy  
       105 天前
    跟前端框架没关系。
    实际中有时也会这么做,比如在新标签页打开或跳转前,需要发起请求或进行校验后才可以执行。
    正常不需要校验或发起请求啥的,确实应该用正常的 a 标签。
    shanghai1998
        3
    shanghai1998  
       105 天前
    a 标签 target=_blank 可以,直接硬写。
    click 里面 window.open(url) 也可
    lalalaqwer
        4
    lalalaqwer  
       105 天前
    用户的话应该没办法搞这个事了,毕竟是路由跳转都是在 js 代码里面写的
    Axnir
        5
    Axnir  
       105 天前 via iPhone
    跟 Vue 没关系,就是写代码的程序员写的不规范
    libook
        6
    libook  
       105 天前
    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
        7
    hicdn  
    OP
       105 天前
    @shintendo
    @Axnir
    遇到这种乱用标签的网站都是 Vue ,造成了对 Vue 的错误认知。
    Jquery 时代也有事件绑定,但是 <a> 标签还是存在的。
    hicdn
        8
    hicdn  
    OP
       105 天前
    @sgiyy 数据校验是后端的工作。前端校验是因为后端不校验吗?后端有校验的前提下,前端没有必要画蛇添足浪费用户的电能。
    shintendo
        9
    shintendo  
       105 天前
    @hicdn 大兄弟,前后端都要校验的,后端校验是为了安全和正确性,前端校验是为了体验,用户不会希望表单填完提交上去跳到结果页被告知填的格式不对,javascript 诞生第一天的最初目的就是做这个
    sgiyy
        10
    sgiyy  
       105 天前   ❤️ 2
    @hicdn #8
    前后端分离的概念了解吗?现在新项目基本都是前后端分离了,前后端全通过接口交互,你后端怎么新打开标签页?

    前端画蛇添足了?但凡多懂点前端的人都不至于这么说,不会就去学哈。
    learnshare
        11
    learnshare  
       105 天前
    学一下 Web 基础课吧

    <a href="URL" target="_blank">LINK</a>
    window.open(URL)
    ccyu220
        12
    ccyu220  
       105 天前
    现在的前端不会切图就算了,连基础都不会了吗。
    Vegetable
        13
    Vegetable  
       105 天前
    不要把你的错误认知放大到其他人行吗?
    window.open("https://v2ex.com","_blank")
    Vegetable
        14
    Vegetable  
       105 天前
    单页面开发的网站,有时候没办法实现新标签页打开的功能。设计上没有考虑这一点,比如将某些状态保存在了内存中,直接打开 url 是无法还原状态的。和 vue 没什么关系,和开发者的认知有关系
    sgiyy
        15
    sgiyy  
       105 天前
    @ccyu220 #12 求求来几个懂点前端的后端的回答吧
    devwolf
        16
    devwolf  
       105 天前
    这问题的内容,确实很诡异……
    konakona
        17
    konakona  
       105 天前
    不用 a 标签是为了阻止事件冒泡。
    但这种明显只是为了 a 而 a 的标签乱用着实难受……

    新开窗口直接<a href="" target="_blank"></a>
    事件新开窗口 <div onClick=""></div> function __ (){ window.open('url',"_blank")}
    learnshare
        18
    learnshare  
       105 天前
    @Vegetable 其实也可以的,只不过数据处理上可能复杂了一些
    比如搜索 /查询参数放在 URL 上,其他数据和正常初始化页面一样就行
    但有些应用写成了跳转前后有特殊关联的数据和逻辑,这其实不太好
    devwolf
        19
    devwolf  
       105 天前
    #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
        20
    Quarter  
       105 天前 via iPhone
    @hicdn 我觉得你这就有点不科学了,强行用结果来推倒原因,因为你看到很多网站乱用标签,并且用了 vue ,所以就是 vue 导致的标签乱用,不觉得有些玩笑了嘛

    乱用标签单纯的是因为开发者开发的不规范,至于为什么是 vue ,那是因为现在很多中小型项目都是 vue 开发的,框架上的上手门槛也比较低,很多人稍微看几天就开始写了,也没有相应的规范来约束,所以才导致的这个情况
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1104 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 20:18 · PVG 04:18 · LAX 13:18 · JFK 16:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.