How to open this route in new window? - vue.js

Question

if (success) {
context.bookingData.city = context.city;
context.bookingData.departureFlightDate = context.departureFlightDate;
context.bookingData.arrivalFlightDate = context.arrivalFlightDate;
context.bookingData.idParkingService = context.idParkingService;
context.bookingData.Price = context.bookings.price.items.data.price;
//const booking = JSON.stringify(context.bookingData);
context.addBookingData(context.bookingData);
context.$router.push({
path: "parkplatz-buchen-schritt-2",
});
}
how to open this path in new window or tab at the same time I have to pass context data to the destination

Answer 1

To open the route in a new window
Home.vue
<template>
<button v-on:click="openInNewWindow()">Open in new window</button>
</template>
<script>
export default {
methods: {
openInNewWindow(){
let routeData = this.$router.resolve({
path: '/about',
query: {
city : 'test',
departureFlightDate : 'test',
arrivalFlightDate : 'test',
idParkingService : 'test',
price : 'test'
}
});
window.open(routeData.href, '_blank');
}
}
}
</script>
Router
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
{{this.$route.query.city}}
</div>
</template>
<script>
export default {
mounted(){
console.log(this.$route.query)
}
}
</script>