Laravel+Inertia.js：无需inertia.visit()实现纯客户端页面切换

Inertia本质是服务端驱动框架，但确实可以实现纯客户端的URL路由切换，全程不触发服务器请求。下面是两种可落地的方案：

方案1：本地路由映射+手动URL控制 #

在客户端维护独立的路由表，通过监听URL变化或自定义导航方法，直接切换组件并更新URL，完全绕开服务器通信。

步骤实现： #

1. 定义本地路由配置

// resources/js/localRoutes.js
export const localRoutes = {
  '/client-page-1': () => import('./Pages/Client/Page1.vue'),
  '/client-page-2': () => import('./Pages/Client/Page2.vue'),
};

2. 在根组件中配置路由解析与监听

// resources/js/app.js
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { localRoutes } from './localRoutes';

createInertiaApp({
  resolve: async (name) => {
    // 优先匹配本地路由
    const currentPath = window.location.pathname;
    if (localRoutes[currentPath]) {
      return localRoutes[currentPath]();
    }
    // 非本地路由仍走服务器端解析逻辑
    return import(`./Pages/${name}.vue`);
  },
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) }).use(plugin);

    // 自定义本地导航方法
    window.localNavigate = (path) => {
      // 更新浏览器URL
      window.history.pushState({}, '', path);
      // 手动触发Inertia页面更新
      app.config.globalProperties.$inertia.reload({
        preserveState: true,
        preserveScroll: true,
      });
    };

    // 监听浏览器前进后退事件
    window.addEventListener('popstate', () => {
      app.config.globalProperties.$inertia.reload({
        preserveState: true,
        preserveScroll: true,
      });
    });

    app.mount(el);
  },
});

3. 组件内使用自定义导航

<template>
  <div>
    <button @click="localNavigate('/client-page-1')">跳转页面1</button>
    <button @click="localNavigate('/client-page-2')">跳转页面2</button>
  </div>
</template>

<script setup>
const localNavigate = window.localNavigate;
</script>

方案2：懒加载组件+路径拦截 #

直接在Inertia的resolve函数中根据当前URL路径返回本地组件，跳过服务器请求。

代码实现： #

createInertiaApp({
  resolve: async (name) => {
    const currentPath = window.location.pathname;
    // 匹配本地页面路径
    switch(currentPath) {
      case '/client-dashboard':
        return import('./Pages/Client/Dashboard.vue');
      case '/client-settings':
        return import('./Pages/Client/Settings.vue');
      default:
        // 其他路由走服务器逻辑
        return import(`./Pages/${name}.vue`);
    }
  },
  // 其他配置项...
});

之后同样通过history.pushState更新URL，再调用$inertia.reload()触发组件切换即可。

关键注意事项 #

• 这种方式仅适用于完全不需要服务器传递props的页面，所有数据需在客户端处理。
• 刷新页面时服务器会收到请求，需在Laravel路由中配置fallback规则避免404：

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

• 确保本地路由与服务器路由无冲突，否则会优先触发服务器路由逻辑。

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