vue跳转到外部链接,新开一个页面

// 在 Vue 中跳转到外部链接并新开一个页面的示例代码

// 方法一：使用 window.open()
methods: {
  openExternalLink() {
    // 使用 window.open() 方法打开外部链接，并在新标签页中打开
    window.open('https://www.example.com', '_blank');
  }
}

// 方法二：使用 a 标签结合 v-on 事件
<template>
  <a :href="externalUrl" target="_blank" @click="trackClick">点击这里</a>
</template>

<script>
export default {
  data() {
    return {
      externalUrl: 'https://www.example.com'
    };
  },
  methods: {
    trackClick() {
      // 可以在这里添加点击事件的处理逻辑，比如记录点击次数等
      console.log('外部链接被点击了');
    }
  }
};
</script>

解释说明：

1. 方法一：直接使用 window.open() 方法来打开外部链接。window.open(url, '_blank') 中的第二个参数 _blank 表示在新标签页中打开链接。

2. 方法二：使用 <a> 标签结合 v-on 事件。通过设置 target="_blank"，可以确保点击链接时在新标签页中打开。同时，你可以通过 @click 事件来监听点击行为，以便执行额外的操作（如记录点击次数）。