How to Use Vue RouterLink Target Attribute for External Websites

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

<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:

<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 file within the vue-router repository. The component uses Vue's attribute inheritance to pass unknown props directly to the underlying <a> element:

// 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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}