Vue.js 应用程序从新页面的下拉菜单中打开 url 链接

Question

我的代码是               <div class="md-list-item-content">                <drop-down direction="down">                  <md-button                    slot="title"                    class="md-button md-button-link md-white md-simple dropdown-toggle"                    data-toggle="dropdown">                    <i class="material-icons">view_day</i>                    <p>Links</p>                  </md-button>                  <ul class="dropdown-menu dropdown-with-icons">                    <li                      v-for="li in linksExternal"                      :key="li.name">                      <a :href="li.href" >                        <i class="material-icons">{{ li.icon }}</i>                                                  </a>                    </li>                  </ul>                </drop-down>              </div>我的脚本代码是      linksExternal: [     { name: "NCI Dictionary",  href: "https://www.cancer.gov/publications/dictionaries/cancer-terms target='_blank'" , icon: "dns" }      ]我尝试在不同位置添加 target='_blank'，例如在 HTML a 标记位置中，但它仍然始终在同一个选项卡中打开，否则我的语法可能不正确。有人能指出我正确的方向吗？这是一个 Vue 特定项目，还是我应该使用调用 window.open 的函数以不同的方式进行操作？如果可以的话，我会尝试继续使用 Vue 最佳实践方法。这应该是一个简单的解决方案，但我还没有找到解决方案。

Answer 1

您的代码需要稍微改变一下：

href: "https://www.cancer.gov/publications/dictionaries/cancer-terms target='_blank'"

请注意target='_blank',target是元素的属性a，而不是 URL 的一部分

所以数据需要改成这样：

linksExternal: [

  { name: "NCI Dictionary",  href: "https://www.cancer.gov/publications/dictionaries/cancer-terms", target="_blank", icon: "dns" }

]

以及这个的模板：

...

<li v-for="li in linksExternal" :key="li.name">

  <a :href="li.href" :target="li.target">

    <i class="material-icons">{{ li.icon }}</i>

  </a>

</li>

...

或者只是如果所有链接都需要在新选项卡中打开：

...

<li v-for="li in linksExternal" :key="li.name">

  <a :href="li.href" target="_blank">

    <i class="material-icons">{{ li.icon }}</i>

  </a>

</li>

...

Answer 2

我不太确定标记的其余部分，但我建议您从 linksExternal 对象中删除目标部分，并将其放入元素中，<a>如下所示

<a :href="li.href" target="_blank">Cool link that opens in another page</a>

Answer 3

尝试使用target="_blank"内部：

<a :href="li.href" target="_blank">  <i class="material-icons">{{ li.icon }}</i> </a>