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: [&nbsp; { name: "NCI Dictionary",&nbsp; href: "https://www.cancer.gov/publications/dictionaries/cancer-terms", target="_blank", icon: "dns" }]以及这个的模板：...<li v-for="li in linksExternal" :key="li.name">&nbsp; <a :href="li.href" :target="li.target">&nbsp; &nbsp; <i class="material-icons">{{ li.icon }}</i>&nbsp; </a></li>...或者只是如果所有链接都需要在新选项卡中打开：...<li v-for="li in linksExternal" :key="li.name">&nbsp; <a :href="li.href" target="_blank">&nbsp; &nbsp; <i class="material-icons">{{ li.icon }}</i>&nbsp; </a></li>...

Answer 2

我不太确定标记的其余部分，但我建议您从 linksExternal 对象中删除目标部分，并将其放入元素中，<a>如下所示<a&nbsp;:href="li.href"&nbsp;target="_blank">Cool&nbsp;link&nbsp;that&nbsp;opens&nbsp;in&nbsp;another&nbsp;page</a>

Answer 3

尝试使用target="_blank"内部：<a :href="li.href" target="_blank"> &nbsp;<i class="material-icons">{{ li.icon }}</i> </a>