How to open this route in new window?

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>