Laravel Inertia Vue表单加载状态在非提交按钮点击时异常触发

我在Vue.js应用中实现了一个登录表单，点击提交按钮时会触发加载spinner，但点击表单外的“Register”链接时，即使未点击提交按钮，加载spinner也会出现。相关代码如下：

脚本代码 #

<script setup>
import { reactive } from 'vue'
import { router } from '@inertiajs/vue3'

defineProps({ errors: Object })

const form = reactive({
  email: null,
  password: null, 
  remember: null,
  loading: false
})
 
function submit() {  
    router.post('/login', form) 
}
router.on('start', () => {
  form.loading = true
})

router.on('finish', () => {
  form.loading = false
})
</script>

HTML代码 #

<form @submit.prevent="submit" action="post">
   <h5>Login </h5>
   <input v-model="form.email" type="text" ><label>Email</label>  
   <input v-model="form.password" type="password" ><label>Password</label>
   <button :class="form.loading ? 'spinner' : ''" type="submit" >{{form.loading ? "Processing..." : 'Login' }}</button>
</form> 
<Link href="/register"> Register </Link>
<Link href="/home" ><i>home</i></Link>

原因分析 #

当前代码通过router.on('start')全局监听Inertia的所有请求开始事件——不管是登录提交的POST请求，还是点击Register、Home链接触发的页面跳转请求，都会触发这个回调并将form.loading设为true，导致登录按钮的加载状态被错误激活。

解决方案 #

移除全局的router事件监听，改为仅在登录提交的流程中单独控制loading状态，这样只有点击登录按钮时才会触发加载状态：

修改后的脚本代码：

<script setup>
import { reactive } from 'vue'
import { router } from '@inertiajs/vue3'

defineProps({ errors: Object })

const form = reactive({
  email: null,
  password: null, 
  remember: null,
  loading: false
})
 
async function submit() {  
    // 提交前开启加载状态
    form.loading = true
    try {
        // 发送登录请求
        await router.post('/login', form)
    } finally {
        // 请求结束（成功/失败）后关闭加载状态
        form.loading = false
    }
}
</script>

这样修改后，只有点击登录提交按钮时，才会设置form.loading为true，点击其他链接的页面跳转不会影响登录按钮的状态。

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