博客

Vue框架提供了Vue Router来管理路由，但是Vue Router主要是用来管理内部页面的路由跳转，当需要在Vue应用中跳转到外部链接时，我们可以使用<router-link>标签，该标签会将外部链接转换成一个可点击的链接按钮，从而实现路由跳转到外部链接界面。

以下是实现路由跳转到外部链接界面的完整攻略：

一、使用<router-link>跳转外部链接

在template中，我们可以使用<router-link>来跳转到外部链接，示例如下：

<template>
  <div>
    <router-link to="https://www.baidu.com" target="_blank">跳转到百度</router-link>
  </div>
</template>

<router-link>标签里的to属性设置外部链接地址，“_blank”属性则表示链接在新窗口中打开。

二、使用window.location.href跳转外部链接

除了使用<router-link>，我们还可以使用 JavaScript 的 window.location.href 实现路由跳转到外部链接界面。示例如下：

<template>
  <div>
    <button @click="redirectToBaidu()">跳转到百度</button>
  </div>
</template>

<script>
export default {
  methods: {
    redirectToBaidu() {
      window.location.href = "https://www.baidu.com";
    }
  }
}
</script>

在这个示例中，我们为一个按钮添加了一个 @click 事件，当用户单击这个按钮时，通过 JavaScript 的 window.location.href 将页面跳转到百度网站。

以上是实现路由跳转到外部链接界面的两种方法，具体的应用场景可以根据实际需求来选择，如打开新窗口/标签页、需要继承父窗口的一些功能等。