HTML链接跳转与vue链接跳转

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()是只能在一个网站中打开本网站的网页