当 Javascript 被禁用时，为什么我的 Ziggy 路线不起作用？

Question

我在 Laravel (Inertia/Vue3) 站点中使用 Ziggy 路线。我正在使用服务器端渲染。当启用 Javscript 时，路由可以正常工作。当禁用 Javascript 或搜索引擎尝试抓取网站时，这些路由将不起作用。

您可以在此处查看示例：https://kitcollect.com/register。

如果您将鼠标悬停在启用了 JavaScript 的“已注册”链接上，您将看到网址“https://kitcollect.com/register/login”。

如果您点击启用了 Javascript 的链接，您将被重定向到“https://kitcollect.com/login”，正如您应该做的那样。如果您禁用 javacript 并单击该链接，它会将您发送至“https://kitcollect.com/register/login”。它将链接视为相对链接。

我的组件正在使用以下内容生成该链接：

<Link
                    :href="route('login')"
                    class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                    Already registered?
                </Link>

它引用的登录路线是标准的 Laravel 登录路线：

Route::get('login', [AuthenticatedSessionController::class, 'create']) ->name('login');

这就是我的 HandleInertiaRequests 中间件的样子：

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;
use Auth;
use Tightenco\Ziggy\Ziggy;
class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that is loaded on the first page visit.
     *
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determine the current asset version.
     */
    public function version(Request $request): string|null
    {
        return parent::version($request);
    }

    /**
     * Define the props that are shared by default.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        $ziggy = new Ziggy($group=null, $request->url());

        return [
            ...parent::share($request),
            'auth' => [
                'auth_user' => $request->user(),
                'user'=>\App\Models\User::with('wishlist')->find(Auth::id())
            ],
            'flash'=>[
                'success'=>fn()=>$request->session()->get('success'),
                'error'=>fn()=>$request->session()->get('error')
            ],
            'ziggy'=>$ziggy->toArray()
        ];
    }
}

我的app.js

import './bootstrap';
import '../css/app.css';

import { createSSRApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createSSRApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

我尝试将路线的 uri 从

Route::get('login', [AuthenticatedSessionController::class, 'create']) ->name('login');

更改为

Route::get('/login', [AuthenticatedSessionController::class, 'create']) ->name('login');

这没有什么区别。

这个问题对我来说是有问题的，因为搜索引擎正在遵循这些不好的路线。

有人有什么建议吗？

Answer 1

在 laravel v11+ 更改中，请确保使用

use Tighten\Ziggy\Ziggy;

而不是旧版本中使用的

use Tightenco\Ziggy\Ziggy;

在你回来时

        return [
            ...parent::share($request),
            'auth' => [
                'user' => $request->user()
            ],
            'ziggy' => function () use ($request) {
                return array_merge((new Ziggy)->toArray(), [
                    'location' => $request->url(),
                    'query' => $request->query()
                ]);
            },
        ];

返回一个对象

{
    "url": "http://your-app-url:8080",
    "port": 8080,
    "defaults": [],
    "routes": {
        "pulse": {
            "uri": "pulse",
            "methods": [
                "GET",
                "HEAD"
            ]
        },
...
 },
    "location": "http://your-app-url:8080/profile",
    "query": {
        "tab": "profile-edit"
    }
}

然后您可以在访问此网址时在 javascript 中访问它

http://your-app-url:8080/profile?tab=profile-edit

const tab = ziggy.query.tab

console.log(tab)
// profile-edit