13.

【Vue.js】aリンクの貼り方と動的URLの作成 <router-link>

編集
この記事の要点
  • Laravel Blade での a リンクの書き方
  • 基本: <a href="{{ url('/path') }}">...</a>
  • 名前付きルート: <a href="{{ route('user.show', $id) }}">...</a>
  • パラメータ付き: route('user.show', ['id' => 1, 'tab' => 'profile'])
  • 外部リンクには rel="noopener"target="_blank"

 

基本的なリンクの書き方

① 静的なリンク

<a href="/users">ユーザー一覧</a>
<a href="https://example.com">外部サイト</a>

② url() ヘルパー(推奨)

<a href="{{ url('/users') }}">ユーザー一覧</a>
<a href="{{ url('/users/' . $user->id) }}">ユーザー詳細</a>
<a href="{{ url()->current() }}">現在のURL</a>
<a href="{{ url()->previous() }}">前のページ</a>

# url() は config('app.url') を基準に絶対 URL を生成

③ asset() ヘルパー(静的ファイル)

<img src="{{ asset('images/logo.png') }}" alt="Logo">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>

名前付きルート(route ヘルパー、推奨)

URL を直書きするより、ルート名で参照するほうが URL 変更に強いです:

// routes/web.php
Route::get('/users/{id}', [UserController::class, 'show'])->name('user.show');
Route::get('/posts/{post}/comments', [CommentController::class, 'index'])->name('comment.index');
# Blade
<a href="{{ route('user.show', $user->id) }}">{{ $user->name }}</a>

# 名前付き引数
<a href="{{ route('user.show', ['id' => $user->id]) }}">{{ $user->name }}</a>

# クエリパラメータも含める
<a href="{{ route('user.show', ['id' => 1, 'tab' => 'profile', 'lang' => 'ja']) }}">
    詳細
</a>
# → /users/1?tab=profile&lang=ja

# 複数のパスパラメータ
<a href="{{ route('comment.index', ['post' => $post->id]) }}">コメント</a>
# → /posts/1/comments

動的にリンクを生成

foreach でリスト

<ul>
    @foreach ($users as $user)
        <li>
            <a href="{{ route('user.show', $user->id) }}">
                {{ $user->name }}
            </a>
        </li>
    @endforeach
</ul>

条件付き

@if (auth()->check())
    <a href="{{ route('user.profile') }}">マイページ</a>
    <a href="{{ route('logout') }}">ログアウト</a>
@else
    <a href="{{ route('login') }}">ログイン</a>
@endif

アクティブリンクの判定

<a href="{{ route('home') }}"
   class="{{ request()->routeIs('home') ? 'active' : '' }}">
    ホーム
</a>

<a href="{{ route('users.index') }}"
   class="{{ request()->routeIs('users.*') ? 'active' : '' }}">
    ユーザー一覧
</a>

# URL ベースの判定
<a class="{{ request()->is('admin/*') ? 'active' : '' }}">管理画面</a>

外部リンクのセキュリティ

<!-- 推奨 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    外部サイト
</a>

# rel="noopener": 新タブ先から window.opener にアクセスさせない(XSS 防止)
# rel="noreferrer": Referer ヘッダを送らない(プライバシー)
# rel="nofollow": 検索エンジンに辿らせない(SEO 用、ユーザ生成リンクで使う)

動的属性とクラス

# クラスを動的に
<a href="{{ route('user.show', $user->id) }}"
   class="btn btn-{{ $user->is_active ? 'primary' : 'secondary' }}"
   data-user-id="{{ $user->id }}">
    {{ $user->name }}
</a>

# Blade のクラスディレクティブ (Laravel 8.51+)
<a @class([
    'btn',
    'btn-primary' => $user->is_active,
    'btn-secondary' => !$user->is_active,
    'disabled' => $user->is_locked
])>...</a>

URL に関する Tips

action() でコントローラ指定

<a href="{{ action([UserController::class, 'show'], $user->id) }}">
    詳細
</a>
# → /users/1 (web.php の定義に従う)

signed URL(署名付き URL)

# 改ざん防止の URL(メール認証等で使う)
$url = URL::signedRoute('verify.email', ['user' => $user->id]);
$temporaryUrl = URL::temporarySignedRoute('download', now()->addMinutes(30), ['file' => $id]);

# Blade
<a href="{{ URL::signedRoute('verify.email', ['user' => $user->id]) }}">
    メール確認
</a>

ローカライズされた URL(多言語)

// 言語プレフィックス付き
Route::prefix('{locale}')->where(['locale' => '(ja|en)'])->group(function () {
    Route::get('/users/{id}', ...)->name('user.show');
});

# Blade
<a href="{{ route('user.show', ['locale' => 'ja', 'id' => $user->id]) }}">...</a>
# → /ja/users/1
<a href="{{ route('user.show', ['locale' => 'en', 'id' => $user->id]) }}">...</a>
# → /en/users/1

JavaScript と連携

Blade で生成した URL を JavaScript に渡す:

# Blade
<script>
const routes = {
    userShow: "{{ route('user.show', ':id') }}",
    userDelete: "{{ route('user.destroy', ':id') }}"
};
</script>

// JS 側で使う
const url = routes.userShow.replace(":id", userId);
fetch(url).then(...);

または Ziggy ライブラリを使うと、JS から名前付きルートを直接呼べます。

パンくず・ナビゲーション

# レイアウトで再利用
<nav class="breadcrumb">
    <a href="{{ route('home') }}">ホーム</a>
    <span>/</span>
    <a href="{{ route('users.index') }}">ユーザー</a>
    <span>/</span>
    <span>{{ $user->name }}</span>
</nav>

<nav class="pagination">
    @if ($users->onFirstPage())
        <span>前へ</span>
    @else
        <a href="{{ $users->previousPageUrl() }}">前へ</a>
    @endif

    @if ($users->hasMorePages())
        <a href="{{ $users->nextPageUrl() }}">次へ</a>
    @else
        <span>次へ</span>
    @endif
</nav>

関連記事

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. クリック時のイベント処理(on:click)
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法