HTML实现
HTML其实就是超链接的效果。
<a href="https://www.baidu.com/" target="_blank">点击打开百度</a>
JavaScript实现
而如果考虑使用js实现的话,可以考虑使用下面的两种方式(设置控件的触发事件)。
本页面打开
location.href="https://www.baidu.com/";
// 或者
window.open('https://www.baidu.com/', '_self');
新页面打开
超链接的默认打开方式就是这种。
window.open('https://www.baidu.com/', '_blank');
———————————————————————————————————————————
HTML部分:
<div class="fotterRightTextOne" @click="jump">Vue跳转外链接</div>
以下是Js部分
1、首先讲解原窗口打开外部链接,如果我们想要达到跳转后可以返回原页面可以使用此方法,接下来分别使用两种方法实现:
(1) 使用location.href =""实现原窗口跳转
jump() {
location.href="https://www.baidu.com/"
}
(2)使用window.open(url ,‘_self’), _self属性表示在当前窗口显示目标网页
jump() {
window.open('https://www.baidu.com/', '_self')
}
2、如果想要实现在新窗口打开外部链接,我们可以使用 window.open(url ,‘_blank’),_blank属性则表示在新窗口显示目标网页
jump() {
window.open('https://www.baidu.com/', '_blank')
}
总结
window.open本质上可以看做<a>标签的js版本,或者说是编码式地打开窗口,但它比<a>标签更加灵活,可以通过js实现与打开的页面之间的通信。