【Vue.js】Vue RouterやSPAとは何か？メリット・デメリットと使い方を実例でわかりやすく解説｜CDNを使ってサクッとSPAを試す方法(初心者向け)

vue-js-prograshi（プロぐらし）-kv Vue.js
2023/8/9
記事内に広告が含まれていることがあります。
[PR]
  1. Vue Routerとは何か？
  2. SPAとは？メリットやデメリット
  3. SPAの使いどころ
  4. 開発環境の構築
  5. CDNによるVue Routerの読み込み
  6. ルーティングの設定方法
    1. ルーティングを設定する（.jsファイル）
    2. コンポーネントを作成する（.jsファイル）
    3. VueインスタンスにVueRouterのインスタンスを渡す（.jsファイル）
    4. リンクを設置する（.htmlファイル）
    5. コンポーネント表示領域を設置する（.htmlファイル）
  7. .jsと.html全体のコード
    1. .htmlファイル
    2. .jsファイル
    3. .htmlファイルにひとまとめにした場合
  8. URLの情報をパラメータとして取得する方法（$routeとparamsの使い方）
    1. 使い方
    2. （１）pathの作成
    3. （２）htmlファイルに対象のrouter-linkを設置する
    4. （３）パラメータを取得して表示する
  9. URLパラメータを複数設定する方法
    1. （１）pathの作成
    2. （２）htmlファイルに対象のrouter-linkを設置する
    3. （３）パラメータを取得して表示する
  10. (参考コード) URLパラメータの使い方実例
    1. .htmlファイル
    2. .jsファイル
    3. ブラウザの表示
  11. ルートに名前をつける方法
    1. 記述方法
    2. 作業手順
  12. パラメータ付きのルートに名前を設定する方法
    1. ルートの中にnameプロパティを設置する
  13. （参考）ルート名をつけたSPAページのコード
    1. .jsファイル
    2. .htmlファイル
    3. ブラウザの表示
  14. ネストしたルートの作成方法（入れ子のルート）
    1. 作成方法
    2. ネストしたルートの作成手順
  15. （参考）ネストしたルートのコード
    1. .jsファイル
    2. .htmlファイル
  16. 転送（リダイレクト）の設定方法
    1. 設定方法
    2. 実例
  17. 名前つきルートの転送（リダイレクト）の方法
    1. 実例
  18. URLそのままで違うページの内容を表示する方法（エイリアスの設定）
  19. URLのハッシュ（＃）を取り除く方法
    1. #を非表示にする方法
    2. ヒストリーモードの注意点
    3. ユーザーがURLを直接叩けるようにする

Vue Routerとは何か？

Vue Routerとは、Vue.jsを使ったWEBサイト（アプリケーション）において、ルーティングを制御するためのVue公式プラグインです。

ルーティングとは、あるURLにアクセスしたときに、どのページを表示するかといった対応付けのことです。

Vue Routerを使うことでSPAのサイト（アプリケーション）を簡単に作成することができます。


SPAとは？メリットやデメリット

SPAとは、URLは変化せずユーザーの操作に合わせてページの内容を変化させるWEBページの構造のことです。Single Page Applicationの略です。Ajaxでサーバーからデータを取得して動的に更新します。

SPAのメリデメ＝Vue Routerのメリデメになります。

SPAのメリット
  1. ユーザー操作に合わせて画面の表示切替が簡単にできます。
  2. 画面切り替え時にWEBサーバーからページをDLする必要がないため、表示速度が早くなりUX改善に繋がります。
SPAのデメリット
  1. 初回のロードで全てのコンテンツを読み込むため、初回ロードは重くなる。
  2. URLが単一なので、個々のページがインデックスされません（SEO上はおすすめできない）。


SPAの使いどころ

SPAの場合URLが１つしか存在しないため、検索エンジンのクローラーによってページがインデックスされません。

Chromeなどの検索結果に各ページを表示したい場合はSPAを使うべきではありません。

一方、管理画面や自社内の専用ツールなど検索結果に各ページをインデックスする必要がない場合は、SPAにすると動きが早くなるので、個別にページを繊維させるよりも使い勝手が良くなります。

そこまでたいそうなアプリケーションでなくとも、単純にリンクをクリックしたら、ページの一部の表示内容が変わるといった使い方もできます。


以下では実際にVue Routerを使う手順についてまとめています。


開発環境の構築

Vue Routerを使うにはVueの使用が可能な環境を作る必要があります。

Vueの開発環境を構築する方法はいくつかあります。詳細は以下をご参考ください。

ただのテストであれば、無料のオンラインエディタを使うので十分です。

無料のオンラインエディタを使う

【超便利】無料のオンラインエディタでVueを手軽に使う方法

ただし、無料のオンラインエディタではURLがわからないので、以下の方法で実際にプロジェクトを生成してみることをお勧めします。

最も手軽なのはVue CLIを使う

Vue CLIを使う

【Vue.js】Vue CLIとは何か？Vueの開発環境を簡単に構築｜インストールからブラウザ表示までの手順を実例で解説

Dockerを使う

Docker上にVue.jsの開発環境を構築する方法。docker-composeで簡単に作成する手順

Docker+Railsを使う

Docker上に構築したRails6でVue.jsを表示する方法


CDNによるVue Routerの読み込み

ここでは簡単にVueRouterを使用するため、CDNを使用します。

通常VueRouterのパッケージを使う際はダウンロードしてインストールします。ですが、CDNを使うとWEB上に置いてあるリソースにアクセスして使用することができます。

Vur RouterライブラリのCDN
  • 最新版: https://unpkg.com/vue-router/dist/vue-router.js
  • バージョン指定: https://unpkg.com/vue-router@3.0.7/dist/vue-router.js

自分のローカルに余計なものをインストールしなくていいのでおすすめです。ただし、本番環境などCDNが急になくなったりバグが発生してアクセスできなくなると困る場合は、ローカルにインストールするのが一般的です。

合わせて読みたい

Vue Routerをローカルにインストールする方法や、ローカルにインストールしたときの使い方については下記をご参考ください。

（参考）Vue.jsのvue-routerを使いこなす！実例で解説（WebpackやRailsで使う方法）


ここでは、VueのライブラリとVue Routerのライブラリの２つをCDNで読み込みます。

以下をbodyタグ終端の上に記述します。順番はVueが先です。

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


バージョンを指定したい場合は以下を参考にしてください。

<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>


ルーティングの設定方法

Vueのプロジェクトではどのページでも共有のベースとなるテンプレートが存在します。

そのテンプレートの中でヘッダー、コンテンツ、フッターなどの各コンポーネント（テンプレート）を読み込みます。

VueRouterも使い方は同じです。テンプレートの中にリンクを設置し、リンクをクリックすると指定したコンポーネントを開くという流れになります。

通常のリンククリックであれば、リンク先のURLに遷移しますが、VueRouterのリンクであればページ内に表示されるテンプレートが変わるだけです。

実際の設定の流れは次のようになります。

ルーティングの設定手順
  1. ルーティングを設定する（.jsファイル）
  2. コンポーネント（テンプレート）を作成する（.jsファイル）
  3. VueインスタンスにVueRouterのインスタンスを渡す（.jsファイル）
  4. リンクを設置する（.htmlファイル）
  5. コンポーネント表示領域を設置する（.htmlファイル）

jsファイルに記載する記述はhtmlファイルのscriptタグの中に記述しても機能します。

リンク設置は、router-linkタグを使います。コンポーネント表示領域を設置にはrouter-viewタグを使います。どちらもVueRouter専用のタグです。


ルーティングを設定する（.jsファイル）

まずはルーティングの設定で、router-linkタグで指定するルートを設定します。

作り方は、new VueRouterでVue Routerのインスタンスを生成し、それを変数（routerを使うのが一般的）に格納します。

VueRouterインスタンスの中にroutesオブジェクトを作成します。値は配列で、プロパティとしてpathとcomponentを指定します。

複数設定する場合は並列に表記します。

基本的な記述方法

        const router = new VueRouter({
            routes: [
                {
                    path: 'パス１',
                    component: コンポーネントの内容１
                },
                {
                    path: '/パス２',
                    component: コンポーネントの内容２
                },
                ,,,
            ]
        })
  • pathは ‘ページのパス’です。ルートURLに対して、相対パスで指定します。
  • componentにはコンポーネントの内容を記載します。


componentの値の書き方

componentの値は次のように設定します。

 component: {
    template: 'htmlタグ',
    data(){
      return {}
    },
    methods:{},
    computeds:{},
    ,,,
}

watchやmountedなども必要に応じて追加してください。

point

VueRouterの中にcomponentの内容も記述していくとファイルが非常に複雑になります。このため、一般的、componentの中身は変数や別ファイルに記述し、それらが入った変数を指定するのが一般的です。


var Top = {
    template: 'htmlタグ',
    data(){
      return {}
    },
    methods:{},
    computeds:{},
    ,,,
}


const router = new VueRouter({
  routes: [
    {
      path: 'パス１',
      component: Top
    },
    ,,,,
  ]
})


実例

説明を表示するルート「/desc」と、ユーザー情報を表示するルート「/user」を作成する場合は以下のようになります。

componentには変数「Desc」と「User」を指定します。中身は次項で作成します。

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


コンポーネントを作成する（.jsファイル）

続いて、VueRouterのリンクをクリックしたときに表示するコンポーネント（ページの内容）を作成します。

上記のVueRouterの各ルートのcomponentにべた書きしてもいいのですが、ここで可読性を上げるため別途変数を作ります。

const 変数名 = { 
          template: 'htmlタグ',
          data(){
            return {}
          },
          methods:{},
          computeds:{}
}

constはJavaScriptの記述で定数の定義です。varの変数では上書きされる可能性があるので、定数を使います。


実例

ルート「desc」と「user」の各コンポーネントの中身を上部に定数として定義します。

        const Desc = { template: '<div><p>説明用のページです</p></div>'}

        const User = { 
          template: `
            <div>
              <p>{{ hello }}</p>
              <p>名前：{{name}}</p>
            </div>
          `,
          data(){
            return {
              name: "AAAさん",
              hello: "こんにちは"
            }
          }
       }

      const router = new VueRouter({
        routes: [
          {
            path: '/desc',
            component: Desc
          },
          {
            path: '/user',
            component: User
          }
        ]
      })
合わせて読みたい

上記ではDescのtemplateは一行で記述していますが、Userは改行しています。それぞれ記述方法が異なります。詳細は下記をご参考ください。

（参考）templateプロパティの値を改行する方法


VueインスタンスにVueRouterのインスタンスを渡す（.jsファイル）

以上でVueRouterの設定が完了したので、次にVueインスタンスにVueRouterのインスタンスの入った変数routerを渡します。

new Vueの処理の中にrouterを記述します。

const app = new Vue({
  router
}).$mount('#app')

routerは上部で記述しているconst router = new VueRouter({ })です。

point

JavaScriptにはプロパティを作成するときに、プロパティの値の変数名がプロパティ名と同じ場合値を省略して記述することができます。（プロパティ名: 値）

route: route

↓ 以下と同じです。

route


実例

VueインスタンスにVueRouterのインスタンスを渡すと.jsの記述は以下のようになります。

const Desc = { template: '<div><p>説明用のページです</p></div>'}
const User = { 
  template: `
    <div>
      <p>{{ hello }}</p>
      <p>名前：{{name}}</p>
    </div>
  `,
  data(){
    return {
      name: "AAAさん",
      hello: "こんにちは"
    }
  }
}

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

const app = new Vue({
  router
}).$mount('#app')

以上で.jsファイルの設定が完了です。

リンクを設置する（.htmlファイル）

次に、HTMLファイルに作成したルートをリンクとして設置します。リンクの設置はrouter-linkタグを使います。

<router-link to="パス">アンカーテキスト</router-link>

toの値には、.jsファイルのVue Routerの中のroutesのpathの値を記述します。


実例

<body>
    <div id="app">
        <!-- Desコンポーネントへのリンク -->
        <router-link to="/desc">・説明ページ</router-link>
      
      　<br>

        <!-- Userコンポーネントへのリンク -->
        <router-link to="/user">・Userページ</router-link>

    </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ファイル）

HTML上に設置したVueRouterのリンクをクリックしたときに、対応するコンポーネントを画面に表示する領域を設置します。

設定方法は非常に簡単で、router-viewタグを設置するだけです。

<router-view></router-view>

ブラウザに表示するときは、このrouter-viewタグが、対応するコンポーネントに記載されているタグに置き換わります。


実例

最後の仕上げとしてhtmlファイルの中でコンポーネントの内容を表示したい場所に、router-viewタグを設置します。

<body>
    <div id="app">
        <!-- Desコンポーネントへのリンク -->
        <router-link to="/desc">・説明ページ</router-link>
      
      　<br>

        <!-- Userコンポーネントへのリンク -->
        <router-link to="/user">・Userページ</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-viewを設置した場所に、対応するコンポーネントの内容が表示されます。

このときページのURLは「～/index.html#/desc」というように、本来のページはそのままで「#/パス名」となっています。これがSPAです。


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

Userページをクリックすると対応するコンポーネントの内容に切り替わります。このときページのURLは「~index.html#/user」となります。


.jsと.html全体のコード

参考に上記処理の.jsと.htmlファイルそれぞれのコードを記載しておきます。よかったらいろいろと試してみてください。

.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">
        <!-- Desコンポーネントへのリンク -->
        <router-link to="/desc">・説明ページ</router-link>
      
      　<br>

        <!-- Userコンポーネントへのリンク -->
        <router-link to="/user">・Userページ</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>


.jsファイル

//コンポーネントの中身を定数として作成
const Desc = { template: '<div><p>説明用のページです</p></div>'}
const User = { 
  template: `
    <div>
      <p>{{ hello }}</p>
      <p>名前：{{name}}</p>
    </div>
  `,
  data(){
    return {
      name: "AAAさん",
      hello: "こんにちは"
    }
  }
}

//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/desc',
      component: Desc
    },
    {
      path: '/user',
      component: User
    }
  ]
})

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


.htmlファイルにひとまとめにした場合

なおscriptタグを使えば、.jsファイルをなくして、.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">
        <!-- Desコンポーネントへのリンク -->
        <router-link to="/desc">・説明ページ</router-link>
      
      　<br>

        <!-- Userコンポーネントへのリンク -->
        <router-link to="/user">・Userページ</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>
  
   <script>
    //VueRouterとVueの定義
    //コンポーネントの中身を定数として作成
    const Desc = { template: '<div><p>説明用のページです</p></div>'}
    const User = { 
      template: `
        <div>
          <p>{{ hello }}</p>
          <p>名前：{{name}}</p>
        </div>
      `,
      data(){
        return {
          name: "AAAさん",
          hello: "こんにちは"
        }
      }
    }

    //VueRouterインスタンスの生成
    const router = new VueRouter({
      routes: [
        {
          path: '/desc',
          component: Desc
        },
        {
          path: '/user',
          component: User
        }
      ]
    })

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



URLの情報をパラメータとして取得する方法（$routeとparamsの使い方）

ログインユーザーごとに異なるページの内容を表示する場合など、URLを「~/user/ユーザーid」とするように、URLに固有の値を振り分ける場合があります。

このような時に、URLのデータをパラメータとして受け取る方法も用意されています。

URLパラメータを使えば、ユーザー毎に固有の値を割り振り分け、その値を取得してコンテンツを出し分けることができます。


使い方

URLパラメータを使用する場合は、RouterVueのpathの部分にパラメータとして受け取りたいURLの部分に「:」をつけます。

「:」の後ろがURLパラメータの名前になります。（例：/user/:userId　なら、パラメータ名は「userId」）

すると、こららの値が、$route変数の中にparamsオブジェクトとして格納されます。$routeはVue専用の変数でルートの情報が入っているものです。

なお、paramsの値は配列になっていてその中に、パラメータ名と値がプロパティとして保存されています。（例：params:[ { パラメータ名:値 } ] ）

取得したデータにアクセスするには、$route.params.パラメータ名とします。


以下で、URLパラメータを使うまでの手順を実例を用いて解説しています。

（１）pathの作成

URLパラメータとして取得したいVueRouterのパスを設定します。例えば、2つ目の/ /の部分をパラメータにしたい場合は次のようになります。

path: '/パス/:パラメータ名'

パラメータにする部分は複数作成することも可能です。（※パラメータ名は固有なものにしてください）

例1： path: ‘/パス/:パラメータ名1/:パラメータ名2’

例２： path: ‘/prefecture/shop/:shopId/items/:itemId’


実例

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

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

path: '/user/:id'としたことで、/user/123というURL（123は任意）にアクセスすると、このルーティングに飛ぶようになります。

その際、$routeのparamasオブジェクトには{ "id": "123" }というデータが入ります。

componentの値「User」は変数です。これは以下で後ほど設定します。


（２）htmlファイルに対象のrouter-linkを設置する

htmlファイルの中にrouter-linkタグを設置します。toの値は静的なリンクですが、pathの内容と連動させます。

パラメータの部分はユーザーIDなどになります。基本的にはユーザーログインなどに合わせて動的に数値が入るようにします。

<router-link to="パス">アンカーテキスト</router-link>


実例

<body>
    <div id="app">

        <!-- Userコンポーネントへのリンク -->
        <router-link to="/user/123">・Userページ</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="/user/123">・Userページ</router-link>の部分でリンク先を「/user/123」としています。

これが上記の、path: '/user/:id'と対応します。この結果、リンク先のページに渡される$routeには、{ "id": "123" }というデータが入ったparamasオブジェクトが入ります。


（３）パラメータを取得して表示する

最後に、router-linkタグのリンク先のテンプレートに渡されたparamasオブジェクトのデータを呼び出します。

データへのアクセス方法は以下のようになります。

$route.params.パラメータ名


実例

Userという変数を定義して、その中にコンポーネントの内容を記述します。その際、渡されたデータを{{ $route.params.id }}として呼び出します。

//コンポーネントの中身を定数として作成
const User = { template: '<p> ユーザーID： {{ $route.params.id }} </p>'}

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

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

以上で設定は完了です。


ブラウザの表示

ブラウザの表示は以下のようになります。

デフォルトでは「Userページ」というリンクのみが表示されています。

↓ リンクをクリック

{{ $route.params.id }}の部分に「123」が入り、パラメータが呼び出せていることがわかります。


URLパラメータを複数設定する方法

URLパラメータの応用編として、パラメータを複数設定する例を紹介します。

（１）pathの作成

URLパラメータとして取得したいVueRouterのパスを設定します。例えば、2つ目と3番目の/ /の部分をパラメータにしたい場合は次のようになります。

path: '/パス/:パラメータ名1/:パラメータ名２'

※パラメータ名は固有である必要があります。

/:パラメータ名1/パス/:パラメータ名2/パス/パス/:パラメータ名３といったように、URLの中でパラメータとして欲しい場所を「:パラメータ名」とすれば、そこに該当する数値や文字列をパラメータとして受け取ることができます。　


実例

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

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

path: '/user/:id/:name'としたことで、/user/xxx/yyyというURL（xxx, yyyは任意）にアクセスすると、このルーティングに飛ぶようになります。

その際、$routeのparamasオブジェクトには{ "id": "xxx", "name": "yyy" }というデータが入ります。

componentの値「User」は変数です。これは以下で後ほど設定します。


（２）htmlファイルに対象のrouter-linkを設置する

htmlファイルの中にrouter-linkタグを設置します。toの値は静的なリンクですが、pathの内容と連動させます。

<router-link to="/パス1/パス2/パス3">アンカーテキスト</router-link>


実例

<body>
    <div id="app">

        <!-- Userコンポーネントへのリンク -->
        <router-link to="/user/123/steve">・Userページ</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="/user/123/steve">・Userページ</router-link>の部分でリンク先を「/user/123/steve」としています。

これが上記の、path: '/user/:id/:name'と対応します。この結果、リンク先のページに渡される$routeには、 { "id": "123", "name": "steve" } というデータが入ったparamasオブジェクトが入ります。


（３）パラメータを取得して表示する

最後に、router-linkタグのリンク先のテンプレートに渡されたparamasオブジェクトのデータを呼び出します。

データへのアクセス方法は以下のようになります。

$route.params.パラメータ名


実例

Userという変数を定義して、その中にコンポーネントの内容を記述します。その際、渡されたデータを{{ $route.params.name }}と {{ $route.params.id }} として呼び出します。

//コンポーネントの中身を定数として作成
const User = {
  template: `
    <div>
      <p>こんにちは「{{ $route.params.name }}」さん！</p>
      <p>あなたのユーザーIDは「{{ $route.params.id }}」です。</p>
    </div>
  `
}

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

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

以上で設定は完了です。


ブラウザの表示

デフォルトでは「Userページ」というリンクのみが表示されています。

↓ リンクをクリック

{{ $route.params.name }}に「steve」が入り、 {{ $route.params.id }}に「123」が入っていることがわかります。

以上で、URLパラメータを複数設置と呼び出しが完了です。


(参考コード) URLパラメータの使い方実例

参考として単一のURLパラメータと複数のURLパラメータを使って表示内容を出し分けるSPAページのコードを記載しておきます。

.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">
      
        <!-- UserIdコンポーネントへのリンク -->
        <router-link to="/user/123">・UserIdページ</router-link>

        <br>
      
        <!-- UserIdNameコンポーネントへのリンク -->
        <router-link to="/user/123/steve">・User名とIDのページ</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>


.jsファイル

//コンポーネントの中身を定数として作成
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/:id',
      component: UserId
    },
    {
      path: '/user/:id/:name',
      component: UserIdName
    }
  ]
})

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


ブラウザの表示

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

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

UserIdのコンポーネントの内容が表示されます。

　↓「User名とIDのページ」をクリック

UserIdNameのコンポーネントの内容が表示されます。


ルートに名前をつける方法

これまでの例では各ルートにpathを設定し、router-linkタグのto属性でそのパスを直接指定していました。

VueRouterにはパスを直接指定する以外にも、各ルートに名前をつけて、toでその名前を指定してコンポーネントを呼び出す方法もあります。


記述方法

通常のルートの設定との違いは以下の４点です。

ルートに名前をつける方法の注意点
  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属性で指定したルート名に対応するコンポーネントの内容が表示されます。


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

以下ではパラメータ付きのルートに名前を設定する方法について実例を踏まえて解説します。

ルートの中に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とユーザー名のページ」をクリック

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


ネストしたルートの作成方法（入れ子のルート）

ルートはネスト（階層構造やネスト）させることができます。

例えば、ユーザー毎の専用ページ「~/user/ユーザーid」というURLの下に、「~/user/ユーザーid/profile」と、「~/user/ユーザーid/blog」の２つのページが存在するとします。

これを作る時に、いちいち３つのルートを作成するのではなく、ユーザー毎の専用ページ「~/user/ユーザーid」を親として、その配下に「~/user/ユーザーid/profile」と、「~/user/ユーザーid/blog」の２つのページを作成することができます。

こうするとルートやWEBページの構造がわかりやすくなります。

user/userId
 |- profile
 └- blog


作成方法

ネストしたルートを作成するときのポイントは以下のようになります。

ネストしたルート作成のポイント
  1. 親となるルートの中にchildrenオブジェクトを作成し、その中に下の階層のルートを定義する。
  2. childrenの中のルートのpathは親要素以下のパスのみを記述する。
  3. 親のtemplateの中に、router-viewタグを設置する。（ここに子テンプレートの内容が表示さる）
  4. router-linkタグで子のルートを指定するときは、to属性の値を親のpath/子のpathとする。


ネストしたルートの作成手順

実際にネストしたルートの作成する手順を実例で解説します。


親となるルートの中にchildrenオブジェクトを作成する

まずはネストしたルートを作成するため、親となるルートの中にchildrenオブジェクトを作成します。

const router = new VueRouter({
  routes: [
    {
      path: '親ルートのパス',
      component: 親ルートのhtmlの内容,
      children: [
         //子ルートを定義
        {
          path: '子ルートのパス',
          component: 子ルートのhtmlの内容
        }

      ]
    }
  ]
})


実例

親ルートのパスを「/user/:id」とし、その下に「/user/:id/profile」と「/user/:id/blog」の２つの子ルートを作成します。

//子ルートのコンポーネント
const Profile = {
  template: `
    <div class="profile">
      <h3>Profileページです。</h3>
      <p>名前：{{ $route.params.name }}</p>
    </div>`
}

const Blog = {
  template: `
    <div class="blog">
      <h3>Blogページです。</h3>
      <p>まだブログは投稿されていません。</p>
    </div>`
}


//VueRouterでネストしたルートを定義
const router = new VueRouter({
  routes: [
    {
      path: '/user/:name',
      name: 'user',
      component: User,
      children: [
        {
          path: 'profile',
          component: Profile
        },
        {
          path: 'blog',
          component: Blog
        }
      ]
    }
  ]
})

const app = new Vue({
  router: router
}).$mount('#app')

子ルートのパスはpath: 'profile',のように、親ルートの「/user/:name」を除外していることに注意してください。

childrenオブジェクトにしたことで、実際のルートは「/user/:name/profile」となります。



親のtemplateの中に、router-viewタグを設置する

現状の状態では、子ルートのコンポーネントを表示する場所がありません。

親のコンポーネントの中に、router-viewタグを設置することで、子ルートのコンポーネントがそこに表示されます。

<router-view></router-view>


実例

親のコンポーネントを作成しその中に、子ルートへのリンクと、子ルートのコンポーネントの表示領域を作成します。

//親ルートのコンポーネント
const User = { template:`
  <div class="user">
     <h2>こんにちは「{{$route.params.name}}」さん</h2>
     <p>ここはあなたの専用ページです<p>

     <!-- ネストしたルート１ -->
     <router-link to="/user/Steve/profile">＞プロファイルを表示する</router-link>
        
     <br>
     
     <!-- ネストしたルート２ -->         
     <router-link to="/user/Steve/blog">＞ブログを表示する</router-link>
     
     <hr><br>  

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

以上で子ルートの設定は完了です。



htmlに親コンポーネントのリンクと表示領域を設定する

最後にhtmlファイルに親コンポーネントのリンクと表示領域を作成します。

<router-link to="親ルートのパス">アンカーテキスト</router-link>
<router-view></router-view>


実例

htmlファイルに親ルート「/user/Steve」へのリンクと、親コンポーネントの表示領域を設置します。

<body>
    <div id="app">

        <!-- userページへのリンク -->
        <router-link to="/user/Steve">・ユーザー専用ページへのリンク</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-viewの部分に該当する子ルートのコンポーネントが表示されます。

　↓「ブログを表示する」をクリック

親コンポーネントの中のrouter-viewの部分に該当する子ルートのコンポーネントが表示されます。


（参考）ネストしたルートのコード

参考として、ネストしたルートの全体のコードを以下にまとめておきます。

.jsファイル

//親ルートのコンポーネント
const User = { template:`
  <div class="user">
     <h2>こんにちは「{{$route.params.name}}」さん</h2>
     <p>ここはあなたの専用ページです<p>

     <!-- ネストしたルート１ -->
     <router-link to="/user/Steve/profile">＞プロファイルを表示する</router-link>
        
     <br>
     
     <!-- ネストしたルート２ -->         
     <router-link to="/user/Steve/blog">＞ブログを表示する</router-link>
     
     <hr><br>  

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



//子ルートのコンポーネント
const Profile = {
  template: `
    <div class="profile">
      <h3>Profileページです。</h3>
      <p>名前：{{ $route.params.name }}</p>
    </div>`
}

const Blog = {
  template: `
    <div class="blog">
      <h3>Blogページです。</h3>
      <p>まだブログは投稿されていません。</p>
    </div>`
}


//VueRouterでネストしたルートを定義
const router = new VueRouter({
  routes: [
    {
      path: '/user/:name',
      name: 'user',
      component: User,
      children: [
        {
          path: 'profile',
          component: Profile
        },
        {
          path: 'blog',
          component: Blog
        }
      ]
    }
  ]
})

const app = new Vue({
  router: 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="/user/Steve">・ユーザー専用ページへのリンク</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>



転送（リダイレクト）の設定方法

古いページをリニューアルしたときなど、新しいページに転送（リダイレクト）したい場合があります。

VueRouterではとても簡単に転送設定をすることができます。

設定方法

転送をかけたいルートの中にredirect: '転送先のルートのパス'を記述すれば、そのルートにアクセスしたときに、自動的にredirectで設定したページに転送されます。

 const router = new VueRouter({
        routes: [
          {
            //リダイレクトの設定
            path: 'パス',
            component: htmlの内容,
            redirect: 'リダイレクト先のパス'
          }
        ]
      })


実例

パスが「/old」の古いページを、新しいページ「/new」にリダイレクトする場合は以下のようになります。

.jsファイル

//コンポーネントの中身
const OldPage = { template: '<p> 古いページです。 </p>'}

const NewPage = { template: '<p> 新しいページです。 </p>'}


//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/old',
      component: OldPage,
      redirect: '/new'
    },
    {
      path: '/new',
      component: NewPage,
    }
  ]
})

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

redirect: '/new'を記述したことで、「/old」にアクセスすると、「/new」のコンポーネントを表示します。

.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="/old">・古いページ</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>


ブラウザの表示

デフォルトでは「古いページ」へのリンクのみが表示されています。

　↓ リンクをクリック

「/new」にアクセスしたのと同じ内容が表示されます。


名前つきルートの転送（リダイレクト）の方法

ルートにnameプロパティでルート名が付けられている場合は、ルート名を使ってリダイレクトの設定ができます。

redirect: { name: '転送先のルート名'}


実例

ルート名が「PreviousPage」という古いページを、ルート名「RenewalPage」にリダイレクトする場合は以下のようになります。

.jsファイル

//コンポーネントの中身を定数として作成
const OldPage = { template: '<p> 古いページの内容です。 </p>'}

const NewPage = { template: '<p> 新しいページの内容です。 </p>'}


//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/old',
      component: OldPage,
      name: 'PreviousPage',
      redirect: { name: 'RenewalPage' }
    },
    {
      path: '/new',
      name: 'RenewalPage',
      component: NewPage,
    }
  ]
})

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

redirect: { name: 'RenewalPage' }を記述したことで、ルートパス「/old」またはルート名「{ name: ‘PreviousPage’ }」にアクセスすると、ルート名「RenewalPage」のコンポーネントを表示します。

.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: 'PreviousPage' } ">・古いページ</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>


ブラウザの表示

デフォルトでは「古いページ」へのリンクのみが表示されています。

↓ リンクをクリック

ルート名「RenewalPage」にアクセスしたのと同じ内容が表示されます。


URLそのままで違うページの内容を表示する方法（エイリアスの設定）

ルートの中でalias(エイリアス)プロパティを設定すると、URLはpathのままで、内容はaliasで指定したパスのコンポーネントの内容を表示することができます。

aliasとは？

aliasとは、「別名」という意味の英語です。エイリアスと呼びます。

alias: '表示するコンポーネントのパス'

 const router = new VueRouter({
        routes: [
          {
            //エイリアスの設定
            path: '/old-page',
            component: oldPage,
            alias: '/new-page'
          },
          {
            path: '/new-page',
            component: newPage
          }
        ]
      })

「~#/old-page」にアクセスすると、URLはそのままで、「~/#new-page」の内容を表示します。


URLのハッシュ（＃）を取り除く方法

VueRouterを使ったSPAのページでは、リンク遷移する度に該当するルートのパスが 「~パス#ルートパス」となり、「＃」が表示されます。

通常のURLのように見せるために、この「＃」を非表示にすることもできます。


#を非表示にする方法

設定は非常に簡単です。

VueRouterインスタンスの中にmode: 'history'を追記するのみです。

これは、HTML5のHistoryモードを使用しますという宣言です。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})


ヒストリーモードの注意点

mode: 'history'は個別のページを作り出したわけではなく、ただURL上で「＃」見えなくしているにすぎず、依然としてSPAのページに他なりません。

このため、ユーザーがブラウザで直接該当するURLを打ち込んだ場合、エラーページに飛ぶことになります。

実例

～/user/#123

↓ ヒストリーモード

～/user/123

これは依然として、「～/user/#123」であり、実際のURL「～/user/123」とは異なります。

ユーザーがURLを直接叩けるようにする

ユーザーがヒストリーモードで表示されているURLを叩いてページにアクセスするためには、サーバー側で転送設定が必要になります。

参考に設定例を記載しておきます。

Appachの設定例

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>


nginxの設定例

location / {
  try_files $uri $uri/ /index.html;
}

詳細は公式ページをご参考ください。

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