Can vue-router open a link in a new tab

Question

I have a summary page and a detail subpage  All of the routes are implemented with vue-router  v 0 7 x  using programmatic navigation like this   this  router go   path    link to page       However  when I route from the summary page to the subpage  I need to open the subpage in a new tab just as one would by adding  target  blank  to an  lt a gt  tag    Is there a way to do this

User · Answer

If you are interested ONLY on relative paths like: /dashboard, /about etc, See other answers.

If you want to open an absolute path like: https://www.google.com to a new tab, you have to know that Vue Router is NOT meant to handle those.

However, they seems to consider that as a feature-request. #1280. But until they do that,

Here is a little trick you can do to handle external links with vue-router.

Go to the router configuration (probably router.js) and add this code:

/* Vue Router is not meant to handle absolute urls. */
/* So whenever we want to deal with those, we can use this.$router.absUrl(url) */
Router.prototype.absUrl = function(url, newTab = true) {
  const link = document.createElement('a')
  link.href = url
  link.target = newTab ? '_blank' : ''
  if (newTab) link.rel = 'noopener noreferrer' // IMPORTANT to add this
  link.click()
}

Now, whenever we deal with absolute URLs we have a solution. For example to open google to a new tab

this.$router.absUrl('https://www.google.com)

Remember that whenever we open another page to a new tab we MUST use noopener noreferrer.

Read more here

or Here

User · Answer

In case that you define your route like the one asked in the question  path    link to page     import Vue from  vue  import Router from  vue-router  import MyComponent from    components MyComponent vue    Vue use Router   export default new Router     routes                path    link to page         component  MyComponent                You can resolve the URL in your summary page and open your sub page as below    lt script gt  export default     methods        popup           let route   this  router resolve  path    link to page              let route   this  router resolve   link to page       This also works        window open route href    blank                  lt  script gt    Of course if you ve given your route a name  you can resolve the URL by name   routes            path    link to page       component  MyComponent      name   subPage              let route   this  router resolve  name   subPage       References    vue-router router resolve location  current   append   vue-router router-link

User · Answer

It seems like this is now possible in newer versions  Vue Router 3 0 1     lt router-link  to    name   fooRoute    target   blank  gt    Link Text  lt  router-link gt

User · Answer

This worked for me-  let routeData   this  router resolve      path    resources c-m-communities      query    dataParameter    parameterValue       window open routeData href    blank      I modified  Rafael Andrs Cspedes Basterio answer

User · Answer

For those who are wondering the answer is no  See related issue on github      Q  Can vue-router open link in new tab progammaticaly      A  No  use a normal link

User · Answer

This works for me  In HTML template   lt a target  quot  blank quot   href  quot url quot   click stop gt your name lt  a gt  In mounted    this url      window location origin  your page name

User · Answer

Just write this code in your routing file        name   Google     path    google     beforeEnter                                         window open  http   www google com                      blank

User · Answer

Somewhere in your project  typically main js or router js  import Router from  vue-router   Router prototype open   function  routeObject      const  href    this resolve routeObject    window open href    blank       In your component    lt div  click   router open  name   User   params   ID  123     gt Open in new tab lt  div gt

User · Answer

I think that you can do something like this  let routeData   this  router resolve  name   routeName   query   data   quot someData quot      window open routeData href    blank     It worked for me

User · Answer

I think the best way is to simply use   window open  yourURL     blank        flies away

User · Answer

The simplest way of doing this using an anchor tag would be this   lt a  href  quot  router resolve  name   posts show   params   post  post id    href quot  target  quot  blank quot  gt      Open Post in new tab  lt  a gt

[javascript] Can vue-router open a link in a new tab?

Examples related to javascript

Examples related to vue.js

Examples related to vue-router