在 vuejs 2.5 的路由器链接中设置目标 = '_blank'

Posted 2023-02-22

【中文标题】在 vuejs 2.5 的路由器链接中设置目标 = \'_blank\'

【英文标题】：set target= '_blank' in router-link of vuejs 2.5在 vuejs 2.5 的路由器链接中设置目标 = '_blank'

【发布时间】：2018-06-24 06:27:20

【问题描述】：

如果 router-link 中有设置方法，则使用 vuejs 2.5

target= '_blank'

？ 我试过这样：

<router-link :to="name: 'UserProfileView', params: id: participantUser.user_id, target: '_blank' "  >  

但是失败了……

谢谢！

【问题讨论】：

Can vue-router open a link in new tab?的可能重复

【参考方案1】：

您将在<a> 标签上添加target='_blank' 喜欢

希望很明确

【讨论】：

所以它会是这样的：<router-link :to="name: 'UserProfileView', params: id: participantUser.user_id" target= '_blank' >

如果标签不是a（例如tag="button"），它将不起作用

@igor 我认为因为默认情况下 router-link 是具有目标属性的锚标记，按钮 html 元素没有它

【参考方案2】：

你必须使用方法。方法看起来像这样：

methods: 
     redirectToUserView(user) 
      const route = this.$router.resolve(
        name: 'UserProfileView',
        params: id: participantUser.user_id,   
      );
      window.open(route.href, '_blank');
    ,
 

【参考方案3】：

下面的代码是用参数打开一个新标签。

带路由器链接=

<router-link
                  :to=" name: 'task_section',query: reportId: item.task,"
                  target="_blank"> Link Text
              </router-link>

现在访问发送的数据

this.$route.query.reportId