如何在 Nuxt-js 方法中路由空白页面？答案

【问题标题】：How to route a blank page inside Nuxt-js method?如何在 Nuxt-js 方法中路由空白页面？
【发布时间】：2023-03-13 22:54:01
【问题描述】：

在我的 nuxt js 项目中，当用户单击按钮时，方法起作用并创建一个链接。我将用户路由到新页面。当然我想在新目标中打开它。我在 nuxt js 中找不到任何解决方案。

   <a :href="`/ticketPrint?${urlLink}`" target="_blank">Go to url</a>

如果我采用这种方式，它会在第二次点击中起作用，因为在第一次点击中会创建链接。所以我不想用这种方式。我想在我的方法中路由它。

async printData(){
......
 await this.$router.push(this.urlLink)
}

当然我想在空白页中打开它。我创建了这个基于 url 查询信息的新页面。

【问题讨论】：

这里不确定printData 的用途。
这只是方法。我获得了必要的信息并在此方法中创建了一个链接。当页面更改时，我创建一个基于 url 信息的 pdf 页面

标签： javascript reactjs vue.js nuxt.js

【解决方案1】：

您需要在此处使用nuxt-link，并且可以将任何常规的VueJS router-link options 传递给它。

target=_blank 应该没问题。

<nuxt-link:to="`/ticketPrint?${urlLink}`">Home page</nuxt-link>

【讨论】：

当用户首先单击路由按钮时，我需要在经过一些处理后在我的方法中创建链接，这肯定需要时间。这样，用户就会进入空白页面。因为我会使用路由查询来获取信息。所以我需要在我的方法中路由它
不确定我是否明白您在此处查看的内容。但是你可以写一个button标签并给它一个@click="printData"，然后将用户重定向到生成的页面。

【解决方案2】：

如果您的页面是内部使用这种方式：

<template>
  <NuxtLink to="/" target="_blank">Home page</NuxtLink>
</template>

如果是外部链接：

<a href="https://nuxtjs.org" target="_blank">External Link to another page</a>

请参阅nuxtjs 文档！

希望对你有帮助！

【讨论】：

首先我创建链接。如果我不创建链接，我无法从我的新空白页面获取任何信息。因此，如果它直接路由，用户将面临空白页面。
尝试创建一个创建并执行它的方法，该方法在标签中调用，点击即可
İ 做了类似的事情，但 target="_blank" 直接路由到新页面而不等待创建路由

【解决方案3】：

我找到了解决办法


                let routeData = this.$router.resolve({
                    path: '/getTicketPage',
                    query: {ticketNumber : ticketNumber , orderNumber : orderNumber}
                }); 
 
                window.open(routeData.href, '_blank');

【讨论】：