javascriptvue.jsvue-router

Can vue-router open a link in a new tab?

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 <a> tag.

Is there a way to do this?

Solution

  • I think that you can do something like this:

    const routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');

    It worked for me.

    Update

    For composition Api:

    import { useRouter } from 'vue-router'
const router = useRouter();
const routeData = router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');