InertiaJs + Vue3 新开标签页丢失Inertia Props问题求助

问题根源 #

你当前的写法存在两处错误：

1. window.location.href 不支持第二个_blank参数，该写法无法触发新标签页打开操作
2. 直接通过window.location.href跳转新标签页会发起全新HTTP请求，Inertia客户端Props不会自动携带至新请求，若后端未做对应处理，就会返回空白HTML页面

正确实现方案 #

方案1：使用Inertia官方openInNewTab方法（推荐）

Inertia提供了专门处理新标签页跳转的方法，可同步传递必要参数：

import { Inertia } from '@inertiajs/inertia'

// 传递参数至后端，后端需接收并处理以返回对应渲染内容
Inertia.openInNewTab(`/view/${props.document.type}/${props.document.id}`, {
  method: 'GET',
  data: {
    documentId: props.document.id,
    documentType: props.document.type
  }
})

方案2：手动创建a标签触发跳转

若不想依赖Inertia方法，可手动生成锚点标签实现新标签页打开：

const link = document.createElement('a')
link.href = `/view/${props.document.type}/${props.document.id}`
link.target = '_blank'
// 需额外传参可拼至URL，或通过表单（POST请求场景）传递
link.click()
document.body.removeChild(link)

后端配套处理 #

无论采用哪种方案，后端/view/{type}/{id}路由需满足：

• 正确接收请求参数
• 返回包含Inertia页面组件的完整响应，确保新标签页中Inertia能正常初始化并渲染内容

内容的提问来源于stack exchange，提问作者LVC