Opening Links in a New Tab with vue-router

Use an “a” tag with target=”_blank”

Instead of using , write:

Explanation:

• this.$router.resolve(…) generates the correct URL for the route.
• target=”_blank” tells the browser to open it in a new tab.
• This works even in Vue 3’s “script setup” by using useRouter().

Example with route name

Suppose you have a route defined like this:

{
 path: '/about',
 name: 'about',
 component: AboutView
}

Then use:

Alternative (if you use path instead of name) :