如何在新窗口中打开这条路线？

Posted 2023-02-22

【中文标题】如何在新窗口中打开这条路线？

【英文标题】：How to open this route in new window?

【发布时间】：2022-01-06 01:34:00

【问题描述】：

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",
          );
        

如何在新窗口或选项卡中打开此路径的同时我必须将上下文数据传递到目的地

【问题讨论】：

使用window.open 代替context.$router.push ?

这能回答你的问题吗？ Can vue-router open a link in a new tab?

【参考方案1】：

在新窗口中打开路线

首页.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>

路由器

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

关于.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>

【讨论】：

我已经知道了，但是如何将 bookingData 传递到目的地

我认为我不能在这方面为您提供太多帮助......我认为最好的方法是将对象作为查询参数传递......编辑了代码，希望对您有所帮助