You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Vue.js 2.5中如何给router-link设置target='_blank'?

在Vue.js 2.5中让router-link打开新标签页的正确方式

你之前踩的坑在于把target放到了:to的路由参数对象里——这个对象是用来定义路由跳转核心信息(比如路由名称、参数、查询条件)的,Vue Router根本不会识别里面的target属性,所以完全没效果。

正确的做法是把target直接作为router-link组件的属性来设置,就像你用原生<a>标签那样:

<router-link 
  :to="{name: 'UserProfileView', params: {id: participantUser.user_id}}" 
  target="_blank"
>
  <!-- 这里放你的链接文本或自定义内容 -->
</router-link>

如果需要根据业务逻辑动态控制是否在新窗口打开(比如根据某个变量判断),还可以用属性绑定语法:

<router-link 
  :to="{name: 'UserProfileView', params: {id: participantUser.user_id}}" 
  :target="needNewTab ? '_blank' : '_self'"
>
  <!-- 链接内容 -->
</router-link>

本质上router-link最终会渲染成原生的<a>标签,所以它支持所有原生<a>标签的标准属性,target就是其中之一,直接用就可以啦。

内容的提问来源于stack exchange,提问作者user2339232

火山引擎 最新活动