Laravel 和 Inertia 在 Vue 中创建路由

Question

我安装了 Laravel 和 Inertia。我把这个放在里面 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

With Inertia all routing is defined server-side. Meaning you don't need Vue Router or React Router. Simply create routes using your server-side framework of choice.

您可以在此处阅读更多相关信息 (https://inertiajs.com/routing#top)

由于 ziggy library，您已经在 javascript 上安装了所有可用的路线。它提供了一个 JavaScript route() 辅助函数，其工作方式与 Laravel 类似，使您可以轻松地在 JavaScript.[=20= 中使用您的 Laravel 命名路由]

要修改或向 URL 添加前缀，您必须使用中间件或 Route Groups 从后端 (Laravel) 执行此操作，因为 Ziggy 不会创建URL，它只是提供您在 Laravel 的 web.php 文件中定义的 URL 到 Javascript.

这就是为什么您的根 blade 文件中有 @routes。如果删除它，this.routes 或 this.$routes 将不可用。

例如

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

这意味着此 URL 将在 /u/dashboard 可用，您可以使用 Javascript 作为 this.route('dashboard');

或阅读有关 ziggy 包的更多信息以获得您想要的结果

Laravel 和 Inertia 在 Vue 中创建路由

Laravel and Inertia create route inside Vue

inertiajs

laravel

vue.js