Laravel 和 Inertia 在 Vue 內部創建路由

Question

我用慣性安裝了 Laravel。 我在resources/js/app.js得到了這個：

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .mixin(require('./translation'))
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

如您所見，有.mixin({ methods: { route } }) 。 我可以使用this.route('name.of.route')從 ˙routes` 文件夾生成命名路由。

我想修改route方法以在每次生成路由時默認添加前綴。 如何調整 Inerta 的route方法。

Answer 1

使用 Inertia，所有路由都是在服務器端定義的。 這意味着您不需要 Vue 路由器或 React 路由器。 只需使用您選擇的服務器端框架創建路由。

你可以在這里閱讀更多信息（ https://inertiajs.com/routing#top ）

由於ziggy 庫，您已經安裝了 javascript 上的所有可用路由。 It provides a JavaScript route() helper function that works like Laravel's, making it easy to use your Laravel named routes in JavaScript.

To modify or add prefix to the URL, you'll have to do it from the backend(Laravel) using Middleware or Route Groups , because Ziggy doesn't create URL, it just provides the URL that you define in your Laravel's web.php Javascript 中的文件。

這就是為什么您的根刀片文件中有@routes的原因。 如果您刪除它， this.routes或this.$routes將不可用。

例如

Route::group(['prefix' => 'u'], function () {
    Route::inertia('/dashboard', 'Dashboard')->name('dashboard');
});

這意味着此 URL 將在/u/dashboard上可用，您可以使用 Javascript as this.route('dashboard'); 訪問它。

或閱讀更多關於 ziggy package 的信息，為您提供所需的結果