InertiaJS中SPA首次加载时如何触发原Axios拦截器的逻辑？

1. 后端全局共享props（避免重复传参） #

先在Laravel端配置全局共享的active_styles，这样所有页面都会自动携带该props，不用每个控制器手动传递：

// app/Providers/AppServiceProvider.php
use Inertia\Inertia;

public function boot()
{
    Inertia::share([
        'active_styles' => fn () => // 这里替换成你的active_styles数据来源，比如从配置、当前用户信息获取
    ]);
}

2. 统一处理逻辑（覆盖首次加载和路由切换） #

把处理active_styles的逻辑提取成独立函数，同时在首次加载和路由切换完成时执行：

// 比如在你的app.js或根组件中
import { router } from '@inertiajs/vue3'
import eventBus from './path-to-your-event-bus' // 替换成你的eventBus路径

// 提取复用的处理函数
const handleActiveStyles = () => {
  const activeStyles = router.page.props.active_styles
  if (activeStyles) {
    eventBus.emit('refreshActiveStyles', { styles: activeStyles })
  }
}

// 首次加载时执行（页面刷新/新标签打开都会触发）
handleActiveStyles()

// 路由切换完成时执行（保持原有逻辑）
router.on('finish', handleActiveStyles)

如果担心初始加载时router.page还未就绪，可以把首次执行的逻辑放在Vue根组件的onMounted钩子中：

<!-- 根组件比如App.vue -->
<script setup>
import { router } from '@inertiajs/vue3'
import { onMounted } from 'vue'
import eventBus from './eventBus'

const handleActiveStyles = () => {
  const activeStyles = router.page.props.active_styles
  if (activeStyles) {
    eventBus.emit('refreshActiveStyles', { styles: activeStyles })
  }
}

onMounted(() => {
  handleActiveStyles()
})

router.on('finish', handleActiveStyles)
</script>

原理说明 #

• 首次加载时，Inertia会把初始页面的props注入到router.page.props中，直接调用处理函数就能拿到数据。
• 路由切换时，finish事件触发后，router.page.props会更新为新页面的props，此时执行处理函数即可同步数据。
• 后端全局共享props后，无需在每个页面控制器中重复传递active_styles，自动注入所有Inertia响应。

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