vue知识点之跳转外部链接的方法

问题分析：

a标记触发的跳转默认被router处理，加上了前缀，见如下代码:

<--a标签-->
<a href="'https://www.baid.com/'" target="_blank">
    a标签跳转到外部链接测试
</a>

跳转后浏览器地址栏结果

http://localhost:8080/'https://www.baid.com/'  

解决方法：

使用浏览器BOM操作(window.location.href)解决这个问题，实现直接跳转到外部链接，相关代码如下：

⏰ 1、页面点击覆盖当前页面

• template
  

  <div @click="toRescue">
      window.location.href跳转到外部链接测试
  </div>

• script
  

  ......
  data() {
      return {
          url: 'https://www.baid.com/',
      };  
  },
  methods: {
      toRescue() {
          window.location.href = this.url;
      },
  }, 

• 结果
  

  // 跳转后浏览器地址栏结果
  https://www.baidu.com/

⏰ 2、点击重新打开一个页面窗口，不覆盖当前的页面

• 新打开一个窗口


  window.open('https://www.baid.com',"_blank")

• 覆盖当前的窗口


  window.open('https://www.baid.com',"_self")