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




