HTML链接跳转与vue链接跳转

1.实现方式

在HTML中,链接到外部url,并且打开一个新的页面

<ul style="width: 134px">
        <li><a href="http://www.baidu.com"  target="_blank">百度</a></li>
</ul>

在vue中,链接到外部url,并且打开一个新的页面

	<ul >
          <li>
             <a href="javascript:void(0);" @click="postOpenPlatform('http://www.baidu.com')"> 百度</a>
          </li>
     </ul>

 methods: {
  postOpenPlatform(url){
  	 window.open(url,'_blank');
  },
  }
2.部分说明
  • a标签跳转的四种方法

     _Blank(在新页面打开)
     _Self(在本页面打开)
     _Parent(在父窗口打开)
     _Top(是在顶层窗口打开)
    
  • javascript中window.open()与window.location.href的区别

     //不打开新的页面(window.location是window对象的属性)
     window.location.href = url;
     //打开一个新的页面(window.open是window对象的方法 )
     window.open(url,'_blank');
    

(1)
window.location是window对象的属性,而window.open是window对象的方法
window.location是你对当前浏览器窗口的URL地址对象的参考!
window.open是用来打开一个新窗口的函数!
(2)
window.open 用来打开新窗口
window.location 用来替换当前页,也就是重新定位当前页

(3)
window.open()是可以在一个网站上打开另外的一个网站的地址
window.location()是只能在一个网站中打开本网站的网页

Logo

前往低代码交流专区

更多推荐