Is there a way to open a new tab and pass it params as you would using $router.push?

[charliemccrea]

Currently I'm using a $router.push to open a page. It would be really useful for us to be able to open the page in a new tab, but I can't find a way to do it and still pass in properties as parameters like we're doing below. Is this possible?

this.$router.push({ 
    name: 'print-list',
    params: {
        listName: this.groupName,
        listData: this.group,
        columns: [
            { name: 'Name', value: 'fullName', enabled: true },
            { name: 'Title', value: 'title', enabled: true },
            { name: 'Organization', value: 'orgName', enabled: true },
        ],
    }
});

[yusufkandemir]

This question is directly and only related to https://github.com/vuejs/router. Please use their issue tracker or Vue's community channels. But, after a simple Google search, I found this, it was the same possible solution that came to my mind: https://stackoverflow.com/a/47874850

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

However, I am not 100% sure how an array of objects is handled. Normally, params can be a string, a number, or an array of these. If the solution doesn't work for you, then it would be because it's not properly serializable. You might want to serialize and deserialize objects yourself if that turns out to be the case.

[charliemccrea]

Thank you for your response. I found that suggestion myself many times while looking into this problem earlier, and unfortunately it does not correctly handle passing in the data. I will continue to look for answer's using Vue's resources.

[metalsadman]

you will most likely have to pass your data as query params, so stringify your object, then parse it back for consumption.

[sjmc11]

Hey, I built this library to make this easier & auto-detect ctrl/cmd while performing router.push().
You can also force a new tab with:

router.push({
 name: "users",
 query: {...} 
}, { forceNewTab: true })

https://www.npmjs.com/package/vue-router-newtab