{"id":13287,"date":"2025-08-20T10:58:57","date_gmt":"2025-08-20T10:58:57","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13287"},"modified":"2025-08-20T11:00:23","modified_gmt":"2025-08-20T11:00:23","slug":"open-links-in-new-tab-using-vue-router","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/open-links-in-new-tab-using-vue-router","title":{"rendered":"Opening Links in a New Tab with vue-router"},"content":{"rendered":"<ul>\n<li>The <router-link> component is designed for <strong>single-page navigation<\/strong>, so it doesn\u2019t open links in a new tab by default.<\/li>\n<li>But you <strong>can <\/strong>open a route in a new tab using <strong>a regular<\/strong> <a> tag with the href set to the Vue Router path.<\/li>\n<\/ul>\n<h3>Use an &#8220;a&#8221; tag with target=&#8221;_blank&#8221;<\/h3>\n<p>Instead of using <router-link>, write:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20105253\/unnamed-1-2.png\" alt=\"router-img\" width=\"662\" height=\"88\" class=\"alignnone size-full wp-image-13289\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20105253\/unnamed-1-2.png 662w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20105253\/unnamed-1-2-300x40.png 300w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/p>\n<h2>Explanation:<\/h2>\n<ul>\n<li>this.$router.resolve(&#8230;) generates the <strong>correct URL<\/strong> for the route.<\/li>\n<li>target=&#8221;_blank&#8221; tells the browser to open it in a new tab.<\/li>\n<li>This works even in Vue 3&#8217;s &#8220;script setup&#8221; by using useRouter().<\/li>\n<\/ul>\n<h3>Example with route name<\/h3>\n<p>Suppose you have a route defined like this:<\/p>\n<pre class=\"lang:adddarkplain\">{\r\n path: '\/about',\r\n name: 'about',\r\n component: AboutView\r\n}<\/pre>\n<p><strong>Then use:<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20105614\/unnamed-4.png\" alt=\"then-use\" width=\"662\" height=\"88\" class=\"alignnone size-full wp-image-13290\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20105614\/unnamed-4.png 662w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20105614\/unnamed-4-300x40.png 300w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/p>\n<p><strong>Alternative (if you use path instead of name) :<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20105744\/unnamed-1-3.png\" alt=\"alternative-img\" width=\"662\" height=\"88\" class=\"alignnone size-full wp-image-13291\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20105744\/unnamed-1-3.png 662w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20105744\/unnamed-1-3-300x40.png 300w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/unit-testing-with-jest-vue-test-utils\" target=\"_blank\">Unit Testing Vue Components<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The component is designed for single-page navigation, so it doesn\u2019t open links in a new tab by default. But you can open a route in a new tab using a regular tag with the href set to the Vue Router path. Use an &#8220;a&#8221; tag with target=&#8221;_blank&#8221; Instead of using , write: Explanation: this.$router.resolve(&#8230;) generates [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13288,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-13287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13287"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=13287"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13287\/revisions"}],"predecessor-version":[{"id":13293,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13287\/revisions\/13293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/13288"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=13287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=13287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=13287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}