Vue.js与Inertia.js中页面加载/刷新时仅触发一次函数的问题

你遇到的代码持续触发问题，核心原因是**router.visit('/getrequest')会触发页面导航，而如果当前组件也被渲染在/getrequest页面中，就会陷入「导航→组件挂载→再次导航」的无限循环**——哪怕把代码放在onMounted里，每次导航到目标页都会重新挂载组件，重复执行跳转逻辑。

解决步骤： #

在执行跳转前，先判断当前是否已经处于目标页面，避免重复导航：

方法1：用浏览器原生路径判断

onMounted(() => {
  // 检查当前路径是否不是目标页，再执行跳转
  if (window.location.pathname !== '/getrequest') {
    router.visit('/getrequest', {
      method: 'get'
    })
  }
})

方法2：用Inertia提供的页面信息判断

通过usePage获取当前Inertia页面的URL，判断更准确：

import { usePage } from '@inertiajs/vue3'

onMounted(() => {
  const page = usePage()
  if (page.url !== '/getrequest') {
    router.visit('/getrequest', {
      method: 'get'
    })
  }
})

额外提醒： #

如果这个组件是页面级组件（即对应/getrequest路由的组件），或者被/getrequest页面引入使用，必须加这个判断逻辑，否则必然触发无限循环。

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