JSからLaravelの名前付きルーティングを利用する

WEB制作
JSからLaravelの名前付きルーティングを利用する

JSからLaravelの名前付きルーティングをPHPのように使用できるようになるtighten/ziggyを紹介します。

目次

インストール

tightenco/ziggyはcomposerを使ってインストールできます。

$ composer require tightenco/ziggy

Usage

Laravelのルート設定は通常通り行います。

// routes/web.php

Route::get('posts', fn (Request $request) => /* ... */)->name('posts.index');
Route::get('posts/{post}', fn (Request $request, Post $post) => /* ... */)->name('posts.show');

Laravelの名前付きルートは以下のようにして呼び出すことができます。

// app.js

route('posts.index');             // 'https://ziggy.test/posts'
route('posts.show', 1);           // 'https://ziggy.test/posts/1'
route('posts.show', [1]);         // 'https://ziggy.test/posts/1'
route('posts.show', { post: 1 }); // 'https://ziggy.test/posts/1'

TypeScript

TypeScriptで利用する場合は@types/ziggy-jsをインストールすることで使用することができます。

$ npm install @types/ziggy-js

Vue

ziggyはVueもサポートされています。

// app.js

import route from 'ziggy';
import { Ziggy } from './ziggy';

Vue.mixin({
    methods: {
        route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
    },
});
<a class="nav-link" :href="route('home')">Home</a>

React

ziggyはReactもサポートされています。

// app.js

import route from 'ziggy';
import { Ziggy } from './ziggy';

// ...

route('home', undefined, undefined, Ziggy);

参考サイト