外部链接跳转在 Router 中的使用285

前言

在 应用中， 负责管理页面的路由和导航。它提供了一种声明式的方式来定义应用程序中页面的路由规则。通常情况下，我们会在 Vue Router 中定义内部路由来跳转到应用程序中的不同页面。

但是，我们有时也需要从 应用中跳转到外部网站或应用程序。在本文中，我们将探讨如何使用 Vue Router 的 组件跳转到外部链接。

使用 router-link 跳转到外部链接

要使用 router-link 跳转到外部链接，只需在链接的 to 属性中指定外部 URL。例如：```html
Google
```

这将生成一个具有目标为指定外部 URL 的锚链接。当用户单击此链接时，他们将被重定向到外部网站。

使用 router-link 组件的一些注意事项：
外部链接不会触发 Vue Router 过渡。 当用户单击外部链接时，浏览器会直接加载新页面，而不会触发任何 Vue Router 过渡。
外部链接不会添加到 Vue Router 历史记录中。 当用户使用浏览器返回按钮时，他们将不会返回到 应用程序中，而是返回到外部网站。
外部链接不会被 Vue Router 导航守卫拦截。 Vue Router 导航守卫仅适用于内部路由，无法拦截或修改外部链接的导航。

解决外部链接问题的方法

为了解决上述问题，我们可以采取以下方法：

使用原生 HTML 链接

如果我们不需要 Vue Router 的功能，我们可以使用普通的 HTML 链接来跳转到外部网站。```html
```

使用第三方库

有第三方库可以帮助我们解决 Vue Router 外部链接的问题。例如， 库允许我们在 Vue Router 中使用外部链接，同时模拟内部路由的行为。这使得我们可以触发过渡、将链接添加到历史记录并使用导航守卫。

自定义路由守卫

我们还可以创建自定义路由守卫来拦截外部链接的导航。例如：```javascript
((to, from, next) => {
if () {
(, '_blank');
();
} else {
next();
}
});
```

这个路由守卫会检查目标路由的元信息中是否存在一个名为 "external" 的属性。如果是，它将在一个新选项卡中打开外部 URL 并将路由重新推送到原始路由。这样，我们可以拦截外部链接的导航并保持 Vue Router 应用程序的状态。

跳转到外部链接是 应用中一个常见的要求。通过使用 router-link 组件或采取本文中讨论的其他方法，我们可以轻松地从 应用中跳转到外部网站，同时解决外部链接带来的问题。

2025-02-07

上一篇：如何用 Router Link 跳向外部网站？

下一篇：发外链的意义与策略