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 的信息，为您提供所需的结果