# How to Use Vue RouterLink Target Attribute for External Websites

> Learn how to use Vue RouterLink target attribute to open external websites in a new tab. Discover the simple method for external navigation in your Vue.js app.

- Repository: [Vue/core](https://github.com/vuejs/core)
- Tags: how-to-guide
- Published: 2026-02-16

---

**To open external websites in a new tab using Vue RouterLink, pass the absolute URL to the `to` prop and add the native `target="_blank"` attribute, which RouterLink automatically forwards to the underlying `<a>` element.**

When building single-page applications with Vue, you often need to link to external resources while keeping your users in the current tab or opening fresh windows. The `RouterLink` component from **vue-router** (not the core `vuejs/core` package) handles this seamlessly by treating absolute URLs as standard anchor navigation and passing through native HTML attributes like `target`.

## How RouterLink Handles External Navigation

`RouterLink` renders an `<a>` element internally and uses **attribute forwarding** for any props it does not explicitly consume. This architectural decision means standard HTML anchor attributes—including `target`, `rel`, and `class`—work without special configuration.

When you provide a `to` prop value, `RouterLink` distinguishes between internal and external destinations:

- **Internal routes** (e.g., `/about` or `{ name: 'user', params: { id: 1 } }`): Intercepted by vue-router for client-side navigation with history management.
- **External URLs** (absolute paths starting with `http://`, `https://`, or `//`): Treated as a native browser link, bypassing the router's history API and allowing standard browser navigation behavior.

## Setting the Target Attribute on RouterLink

To control where an external link opens, add the `target` attribute directly to the `RouterLink` component. The value is forwarded to the rendered anchor tag.

### Opening External Links in a New Tab

```vue
<RouterLink 
  to="https://vuejs.org" 
  target="_blank" 
  rel="noopener noreferrer"
>
  Visit Vue Documentation
</RouterLink>

```

### Using Dynamic External URLs

When the destination is reactive, bind the `to` prop and keep the `target` static:

```vue
<script setup>
const externalUrl = ref('https://github.com/vuejs/core')
</script>

<template>
  <RouterLink 
    :to="externalUrl" 
    target="_blank" 
    rel="noopener noreferrer"
  >
    View Vue Core Source
  </RouterLink>
</template>

```

### Security Best Practices

Always include **`rel="noopener noreferrer"`** when using `target="_blank"` for external sites. This prevents the new page from accessing the `window.opener` property of your application, mitigating tabnabbing attacks and improving performance by preventing the new browsing context from sharing the same process.

## RouterLink Implementation Details

The forwarding behavior is implemented in the [`RouterLink.ts`](https://github.com/vuejs/core/blob/main/RouterLink.ts) file within the vue-router repository. The component uses Vue's attribute inheritance to pass unknown props directly to the underlying `<a>` element:

```typescript
// Simplified from vue-router/src/components/RouterLink.ts
return h('a', {
  ...attrs, // Native attributes like target, rel, class are spread here
  href: resolved.href,
  onClick: navigate
}, slots.default?.())

```

In the `vuejs/core` repository, specifically in [`packages/compiler-sfc/__tests__/compileTemplate.spec.ts`](https://github.com/vuejs/core/blob/main/packages/compiler-sfc/__tests__/compileTemplate.spec.ts), Vue treats `<router-link>` as a custom component during template compilation, delegating all runtime behavior to the vue-router package.

## Summary

- **`RouterLink`** forwards native HTML attributes like `target` directly to the rendered `<a>` element.
- For external navigation, pass an **absolute URL** to the `to` prop and add **`target="_blank"`** to open in a new tab.
- Always pair `target="_blank"` with **`rel="noopener noreferrer"`** for security.
- External URLs bypass vue-router's client-side navigation and trigger standard browser behavior.

## Frequently Asked Questions

### Does RouterLink support all HTML anchor attributes?

Yes. Because `RouterLink` uses Vue's attribute inheritance, any standard HTML attribute valid on an `<a>` tag—including `target`, `rel`, `id`, `class`, and `download`—is automatically forwarded to the underlying anchor element.

### What happens if I use target="_blank" on an internal route?

Vue-router will still perform client-side navigation to the internal route, but the browser will attempt to open the result in a new tab or window. This usually creates a full page reload in the new tab rather than a smooth SPA transition, so it is generally discouraged for internal navigation.

### How does RouterLink detect if a URL is external?

`RouterLink` checks if the `to` prop value starts with a protocol scheme (such as `http://`, `https://`, or `//`) or if it matches the browser's current origin. If the URL is absolute and points to a different origin, vue-router treats it as external and does not intercept the navigation event, allowing the browser to handle it as a standard link.