如何使用Vue Router正确重定向至外部网站？

Vue Router 的 redirect 属性默认仅处理内部路由路径，直接写入外部 URL 会被当作相对路径，拼接在当前域名后，因此出现 domain.com/https://www.google.com 的错误跳转。以下是两种可行的解决方式：

方式一：使用路由守卫 beforeEnter #

直接在路由配置中通过守卫触发外部跳转，并阻止内部导航逻辑：

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import Commands from "@/views/Commands.vue";

const routes = [
  {
    path: "/google",
    beforeEnter() {
      window.location.href = "https://www.google.com";
      return false; // 终止Vue Router内部导航
    },
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

方式二：封装外部跳转组件（适合复用场景） #

先创建一个通用跳转组件 ExternalLink.vue：

<template></template>

<script setup>
import { onMounted } from 'vue';

const props = defineProps({
  url: {
    type: String,
    required: true
  }
});

onMounted(() => {
  window.location.href = props.url;
});
</script>

再在路由中引用该组件并传入目标 URL：

import { createRouter, createWebHistory } from "vue-router";
import ExternalLink from "@/components/ExternalLink.vue";

const routes = [
  {
    path: "/google",
    component: ExternalLink,
    props: { url: "https://www.google.com" }
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

内容的提问来源于stack exchange，提问作者Termin