【Vue.js】VueRouterで作成したルートに名前をつける方法を実例で解説｜URLパラメータを使ったルートに名前をつけて、router-linkを使う方法

vue-js-prograshi（プロぐらし）-kv Vue.js
2023/8/23
記事内に広告が含まれていることがあります。

Vue.jsの公式ツールであるVueRouterでは設定した名前に好きな名前をつけることができます。

名前を指定すると、router-linkでリンク先を指定するときにルート名で指定することが可能になります。

パスが長い場合など、ルート名にすると可読性が上がります。

ただし、通常のパスを指定する方法とは記述方法が異なります。特に、URLパラメータを設定しているルートに名前を付ける場合は注意が必要です。

ここでは、VueRouterで作成したルートに名前をつける方法について実例を使って解説しています。


ルートに名前をつけるときのポイントと注意点

ルートに名前を付ける際のポイントと通常のルートの設定との違いなどの主な注意点は以下の４点です。

ルートに名前をつける方法の注意点
  1. ルートの中にnameプロパティを設置する。
  2. router-linkのto属性はv-bindにする（省略形の場合は「:」をつける）。（ :to="" ）
  3. router-linkのto属性の値の指定はオブジェクトにして、{ name: 'ルート名' }とする。
  4. URLパラメータが必要な場合は、params: { パラメータ名: 値 }を追記する。

以下で実際にルートに名前をつける手順について解説します。


ルートに名前をつけアクセスする手順

ルートの中にnameプロパティを設置する

VueRouterインスタンスのroutesの中の名前を付けたいパスに、nameプロパティを追加します。

ルートの記述は次のようになります。

const router = new VueRouter({
  routes: [
    {
      path: '/パス',
      name: 'ルート名',
      component: テンプレートの内容
    },
  ]
})


実例

/userというパスに「originalName」という名前を付与すると次のようになります。

const User = { template: '<p> ユーザーページです </p>'}

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      name: 'originalName',
      component: User
    }
  ]
})

なお、componentは変数「User」で指定しています。

「User」の内容は上記に記述している{ template: 'ユーザーページです '} が入ります。


router-linkのto属性はv-bindにする（省略形の場合は「:」をつける）

次に、作成した名前付きルートにアクセスするための、router-linkタグを作成します。

to属性の値をv-bindにして（省略形の場合は「:」をつける）、値をオブジェクトにし、nameプロパティの値でルート名を指定します。

<router-link :to=" { name: 'ルート名' } ">アンカーテキスト</router-link>

※ルート名にシングルクオーテーションをつけないと変数とみなされてしまいます。

実例

「originalName」というルート名へのリンクを設置する場合は以下のようになります。

<body>
    <div id="app">
      
        <!-- Userコンポーネントへのリンク -->
        <router-link :to="{ name: 'originalName' } ">・UserIdページ</router-link>

    　　<!-- コンポーネントの表示領域 -->
        <router-view></router-view>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>


以上で名前付きのルートの作成と呼び出しは完了です。


ブラウザの表示

デフォルトではrouter-linkタグのアンカーテキストのみが表示されています。

↓　リンクをクリック

to属性で指定したルート名に対応するコンポーネントの内容が表示されます。


パラメータ付きのルートに名前を設定する方法

パラメータ付きのルートの場合は、パラメータなしの場合とrouter-linkタグの記述方法が異なります。

以下で、パラメータ付きのルートを作成する方法を実例で解説します。

ルートの中にnameプロパティを設置する

VueRouterインスタンスのroutesの中の名前を付けたいパスに、nameプロパティを追加します。

const router = new VueRouter({
  routes: [
    {
      path: '/パス/:パラメータ名',
      name: 'ルート名',
      component: テンプレートの内容
    },
  ]
})


実例

２つのパラメータ「id」と「name」を持つルートに「userIdName」という名前を設定します。

const UserIdName = {
  template: `
    <div>
      <p>こんにちは「{{ $route.params.name }}」さん！</p>
      <p>あなたのユーザーIDは「{{ $route.params.id }}」です。</p>
    </div>
  `
}

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id/:name',
      name: 'userIdName',
      component: UserIdName
    }
  ]
})

なお、componentは変数「UserIdName」で指定しています。

「UserIdName」の内容はVueRouterインスタンスの上に定義しています。


router-linkのto属性はv-bindにする（省略形の場合は「:」をつける）

上記で作成した名前付きルートにアクセスするための、router-linkタグを作成します。

to属性の値をv-bindにして（省略形の場合は「:」をつける）、値をオブジェクトにし、nameプロパティの値でルート名を指定します。

ルートにパラメータ設定してある場合は、paramsオブジェクトを追加してパラメータの数だけパラメータ名と値のセットを記述します。

<router-link :to="{ name: 'ルート名', params{ パラメータ名1: 値1, パラメータ名2: 値2,,, } }>アンカーテキスト</router-link>

※ルート名にシングルクオーテーションをつけないと変数とみなされてしまいます。

実例

ルートは２つのパラメータ「id」と「name」を持つので、それぞれをparamsの中に記述します。

<body>
    <div id="app">
      
        <!-- UserIdNameコンポーネントへのリンク -->
        <router-link :to=" { name: 'userIdName', params: { id: 123, name: 'Steve' } } ">・UserIdとユーザー名のページ</router-link>

    　　<!-- コンポーネントの表示領域 -->
        <router-view></router-view>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>


以上でパラメータを持つ、名前付きのルートの作成と呼び出しは完了です。


ブラウザの表示

デフォルトではrouter-linkタグのアンカーテキストのみが表示されています。

↓　リンクをクリック

to属性で指定したルート名とパラメータ（params）に対応するコンポーネントの内容が表示されます。


（参考）ルート名をつけたSPAページのコード

参考として、パラメータなしとありのルートに対してルート名をつけて、router-linkタグでリンクを設置したコードを記載しておきます。


.jsファイル

//コンポーネントの中身を定数として作成
const User = { template: '<p> ユーザーページです </p>'}

const UserId = { template: '<p> ユーザーID： {{ $route.params.id }} </p>'}

const UserIdName = {
  template: `
    <div>
      <p>こんにちは「{{ $route.params.name }}」さん！</p>
      <p>あなたのユーザーIDは「{{ $route.params.id }}」です。</p>
    </div>
  `
}

//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      name: 'originalName',
      component: User
    },
    {
      path: '/user/:id',
      name: 'userId',
      component: UserId
    },
    {
      path: '/user/:id/:name',
      name: 'userIdName',
      component: UserIdName
    }
  ]
})

//Vueインスタンスの生成
const app = new Vue({
  router
}).$mount('#app')

.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router</title>
</head>
<body>
    <div id="app">
      
        <!-- Userコンポーネントへのリンク -->
        <router-link :to="{ name: 'originalName' } ">・Userページ</router-link>

        <br>
      
        <!-- UserIdコンポーネントへのリンク -->
        <router-link :to=" { name: 'userId', params: { id: 123 } } ">・UserIdページ</router-link>

        <br>
      
        <!-- UserIdNameコンポーネントへのリンク -->
        <router-link :to=" { name: 'userIdName', params: { id: 123, name: 'Steve' } } ">・UserIdとユーザー名のページ</router-link>

    　　<!-- コンポーネントの表示領域 -->
        <router-view></router-view>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>
</html>


ブラウザの表示

デフォルトでのブラウザの表示は以下のようになっています。

　↓「・Userページ」をクリック

　↓「・UserIdページ」をクリック

パラメータが受け渡され、画面上に表示されます。

　↓ 「・UserIdとユーザー名のページ」をクリック

複数のパラメータが受け渡され、画面上に表示されます。


タイトルとURLをコピーしました