Laravel+Jetstream+Inertia登录后Dashboard组件无法显示求助

针对你遇到的登录后URL跳转正常但Dashboard组件不加载、$route.path卡在/login的问题，以下是几个针对性的排查和修复方向：

1. 修正Inertia登录跳转的后端逻辑 #

Jetstream + Inertia的登录默认由后端处理重定向，若后端使用普通Laravel重定向，可能无法触发前端vue-router的状态更新。需确保登录成功后通过Inertia的方式触发跳转：

• 在app/Http/Middleware/HandleInertiaRequests.php中调整认证后的跳转逻辑：

  public function authenticated($request, $user)
  {
      // 使用Inertia的location方法触发前端路由更新
      return \Inertia\Inertia::location(route('dashboard'));
  }
  

• 同时确认登录页面的表单提交使用Inertia的Form组件，而非原生表单提交，确保请求是Inertia发起的AJAX请求：

  <template>
    <form @submit.prevent="submit">
      <!-- 表单内容 -->
    </form>
  </template>
  <script>
  import { useForm } from '@inertiajs/inertia-vue'
  export default {
    setup() {
      const form = useForm({
        email: '',
        password: '',
        remember: false,
      })
      const submit = () => form.post(route('login'))
      return { form, submit }
    }
  }
  </script>
  

2. 强制router-view重新渲染 #

给<router-view>绑定key属性，确保URL变化时强制组件重新渲染，解决路由状态未更新的问题：

<template>
  <app-layout>
    <!-- 现有工具栏代码 -->
    <router-view :key="$route.fullPath"></router-view>
  </app-layout>
</template>

通过绑定$route.fullPath作为key，每次URL变化都会重新创建<router-view>实例，避免组件复用导致的状态残留。

3. 校验vue-router配置与后端路由匹配 #

• 确认vue-router的base配置正确指向/app/：

  // router.js
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Dashboard from './Pages/Dashboard.vue'
  
  Vue.use(VueRouter)
  
  const routes = [
    { path: '/dashboard', component: Dashboard },
    { path: '/foo', component: Sample },
    // 其他路由
    { path: '/login', redirect: '/dashboard' }
  ]
  
  const router = new VueRouter({
    base: '/app/',
    routes
  })
  
  export default router
  

• 后端路由需将/app/*统一指向Inertia入口页面，确保所有前端路由请求都由Inertia处理：

  // routes/web.php
  Route::prefix('app')->group(function () {
    Route::get('/', function () {
      return Inertia::render('App');
    });
    Route::get('{any}', function () {
      return Inertia::render('App');
    })->where('any', '.*');
  });
  

4. 排查Inertia与vue-router的冲突 #

Inertia自带路由功能，与vue-router共存时需避免逻辑混淆：

• 确保Inertia初始化时正确注入vue-router，且组件职责清晰（Dashboard是vue-router组件而非Inertia Page组件）：

  // resources/js/app.js
  import Vue from 'vue'
  import { InertiaApp } from '@inertiajs/inertia-vue'
  import router from './router'
  
  Vue.use(InertiaApp)
  
  new Vue({
    router,
    render: h => h(InertiaApp, {
      props: {
        initialPage: JSON.parse(document.getElementById('app').dataset.page),
        resolveComponent: name => require(`./Pages/${name}`).default,
      },
    }),
  }).$mount('#app')
  

• 避免在Inertia的页面组件中同时使用vue-router的路由逻辑，确保路由跳转统一由vue-router或Inertia处理，不要混合使用。

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