Laravel 9+Vue3中InertiaJs手动访问路由报错及解决

我最近在Laravel 9 + Vue3的项目里，尝试用InertiaJS手动访问Laravel命名路由时踩了个坑。最开始我用从@inertiajs/vue3导入的router实例来调用visit方法，代码是这样的：

import { router } from '@inertiajs/vue3'

router.visit(url, {
  method: 'get',
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  onCancelToken: cancelToken => {},
  onCancel: () => {},
  onBefore: visit => {},
  onStart: visit => {},
  onProgress: progress => {},
  onSuccess: page => {},
  onError: errors => {},
  onFinish: visit => {},
})

结果运行时一直弹出**"undefined function visit"**的报错，查了文档也没立刻找到解决方向。后来试了改用全局Inertia对象的visit方法，居然顺利解决了问题！

可行的解决方案代码 #

import { Inertia } from '@inertiajs/inertia';

Inertia.visit(this.route('admin.news'), {
  method: 'get',
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  onCancelToken: cancelToken => {},
  onCancel: () => {},
  onBefore: visit => {},
  onStart: visit => {},
  onProgress: progress => {},
  onSuccess: page => {},
  onError: errors => {},
  onFinish: visit => {},
})

关键说明 #

• 这里用this.route('admin.news')调用的是Laravel提供的前端路由助手（需要确保项目已配置好相关支持），能直接生成对应命名路由的URL，不用手动拼接地址。
• 相比于从@inertiajs/vue3导入的router实例，全局Inertia对象的visit方法在手动访问场景下更稳定，不会因为组件上下文或初始化时机问题出现方法未定义的情况。

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