admin 管理员组文章数量: 1184232
当我们用鼠标中键点击一个带href属性的a标签时，我们会发现它会跳转到新的页面。此时即使添加preventDefault属性也没有用。因为对于a标签，当用中键点击时，会默认从新窗口打开链接
要想阻止这一行为，我们可以将a标签转换为其他标签如span，再给span添加click属性。
比如，当我们使用vue的router-link标签创建路由标签时，默认创建的是a标签
<router-link :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
v-for='tag in visitedViews':key='tag.path':class='isActive(tag)? "active" : ""'class='tags-views-item'
@click.middle.native="!isFix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)">{{tag.title}}</router-link>当我们将router的tag属性设为span时，既可解决这一问题
<router-link :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag ='span'
v-for='tag in visitedViews':key='tag.path':class='isActive(tag)? "active" : ""'class='tags-views-item'
@click.middle.native="!isFix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)">{{tag.title}}</router-link>
拓展，对于a标签的target属性
规定在何处打开链接文档
_blank 在新标签页打开标签
_parent 在父级frameset打开标签
_self 在当前frameset打开标签
_top 去掉页框并用document.html取代frameset
framename 在名为framename的框架中打开标签
此外，若想了解更多关于router-link的用法可以参考
版权声明：本文标题：Vue开发者必学：一招搞定阻止A标签中键点击导致的新窗口开启问题。 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1772044259a3551484.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论