◀ 13.

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

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

 

基本的なリンクの書き方

① 静的なリンク

ユーザー一覧
外部サイト

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

ユーザー一覧
ユーザー詳細
現在のURL
前のページ

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

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

Logo

名前付きルート（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
{{ $user->name }}

# 名前付き引数
{{ $user->name }}

# クエリパラメータも含める

    詳細

# → /users/1?tab=profile&lang=ja

# 複数のパスパラメータ
コメント
# → /posts/1/comments

動的にリンクを生成

foreach でリスト

条件付き

@if (auth()->check())
    マイページ
    ログアウト
@else
    ログイン
@endif

アクティブリンクの判定


    ホーム



    ユーザー一覧


# URL ベースの判定
管理画面

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



    外部サイト


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

動的属性とクラス

# クラスを動的に

    {{ $user->name }}


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

URL に関する Tips

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


    詳細

# → /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

    メール確認

ローカライズされた URL（多言語）

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

# Blade
...
# → /ja/users/1
...
# → /en/users/1

JavaScript と連携

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

# Blade


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

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

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

# レイアウトで再利用

関連記事

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成(mac)
  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. 画面サイズの取得方法
2026-05-15 05:05:32 T 6802

人気ページ

最近更新/作成されたページ