• 2022/2/20
• 5分

【Vue.js】Routerでできることとメソッドまとめ！ルートオブジェクトやリダイレクト方法など

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Vue.jsに必須のライブラリである「Vue Router」の数あるメソッドやできることのうち、汎用性が高くよく使いがちなメソッドや機能をまとめました。

Vue Routerの役割とは

Vue RouterとはJavascriptのフレームワーク「Vue.js」のライブラリの1つです。このライブラリはVue.jsで作り上げたプロジェクトにルーティング機能を持たせることができます。

ここでいうルーティング機能とは指定したURLに対してVueのコンポーネントを紐付けることでアクセスされた時の描写を切り替得られる設定のことを指します。

Laravelでいう「web.php」と同じ役割ですね！

導入するのは簡単で、プロジェクトに対して以下のコマンドをコマンドラインで実行するだけです。細かい詳細は下記リンクからご覧ください。

$ npm install vue-route

HTML側に記述するタグ

Vur Routerではテンプレート側(HTML側)に記述する2つの独自のタグがあります。

router-linkタグ

<router-link to="/">

to属性：変移させたいURLを記述、オブジェクトを渡すことも可能

オブジェクトを渡す場合

<router-link v-bind:to="{ 
  path: /'post',
  query: {id: 2 } 
}
">クリック</router-link>

オブジェクトで渡す際はto属性をv-bindして、pathプロパティにURLを渡します。 queryプロパティに値を渡せば以下のようなクエリパラメータを含んだURLも実現可能です。

https://ドメイン.com/post?id=2

router-viewタグ

<router-view></router-view>

name属性：名前をつけることで1つのルーティングに複数のコンポーネントをマウント可能になる

<router-view name="Left"></router-view>
<router-view></router-view>
<router-view name="Right"></router-view>

router.js

components: { 
  default: Home, 
  Left: componentA, 
  Right:componentB,
},

名前をつけなかったものはdefault、つけたものはその名前に対してコンポーネントを割り振ることができる

ハッシュとヒストリーの違い

Vue Routerのルーティング設定ではアクセスするURLのモードを選択することができます。

• ハッシュモード
• HTML5ヒストリーモード

ハッシュモード

ハッシュモードはアクセスするURLにハッシュ文字(#)を含めてルーティングします。このモードはサーバーへの接続なしで運用できるのでヒストリーモードより高速です。しかしURLにハッシュ文字が含まれるので見た目の問題がデメリットになります。

http://localhost:8080/#/test

HTML5ヒストリーモード

HTML5ヒストリーモードはいわゆる普通のURLでルーティングします。サーバーへの接続は必須となるため通信速度はハッシュモードに比べると若干劣ります。またHTML5 History APIをサポートしていないブラウザでは使用できないのがデメリットでもあります。(とはいえほとんど対応している)

http://localhost:8080/test

History APIとは？

History APIとはWebページの履歴情報を操作できるJavaScriptの機能のことです。ブラウザの機能の「戻る」や「進む」などはもちろんのこと「追加」や「変更」なども操作可能です。

// 前のページに戻る
window.history.back();
// 次のページへ進む
window.history.forward();

Modeの設定方法

Routerでは「router.js(router ＞ index.js)」でモード設定の変更ができます。router.jsではimportでVueとRouterを読み込み使用可能にします。その後インスタンス化したRouterオブジェクトの各プロパティに値を設定し、エクスポートさせ「app.js」などで読み込んで使えるようにします。

router.js(router ＞ index.js)

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router)

const router = new Router({
    // 各種設定
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
      // ルーティング
    }],
})
// app.jsで読み込ませるためエクスポート
export default router;

インスタンス化する際にモードを設定するのはmodeプロパティです。

const router = new Router({
    // ハッシュの場合
    mode: 'hash',
    // ヒストリーモードの場合
    mode: 'history',
})

URLベースは「.env」ファイルのBASE_URLを参照するように設定しておきます

base: process.env.BASE_URL,

ルーティング設定

実際のルーティング(アクセスされるURLと呼び出すコンポーネントを紐づける)設定は「router.js」内にインスタンス化したroutesプロパティに記述していきます。

routes: [{
  path: アクセスされるURL
  component: 紐付けたいコンポーネント,
  name: ルーティングの名前
},
{
  path: "/home",
  component: componentA,
  name: "home"
}]

routesプロパティにはオブジェクト形式のルーティング情報を配列の中に格納し渡します。基本となるのはpath、component、nameです。

複数記述するときは配列の中にオブジェクトを増やしていきます。ルーティングは上からマッチするものが使われるので記述する順番には注意が必要です。

pathプロパティで出来ること

path: "/home",

pathプロパティにはアクセスされるURLを指定します。上記のように正確なURLを指定することもできますが、もう少しフレキシブルなルーティング設定も可能です。

• 記事ページのような可変的なURLにマッチ
• 正規表現などを使ったURLのチェック
• 全てのURLにマッチ

記事ページのような可変的なURL

記事ページなどでよく見るこのようなURLの数字部分もURLパラメータと呼びます。

http://localhost/数字

routerでは可変的なパラメータを持たせたURLにマッチさせることもできます。設定するにはpathに「:パラメータ名」と記述するだけです。

// マッチするURL /post/1 , /post/250
path: "/post/:id",

正規表現などを使ったURLのチェック

しかしこのままでは/post/hogeなど数字以外でもマッチしてしまうので:パラメータ名の後ろに「(\\d+)」と記述することでパラメータ部分が数値のURLのみにマッチさせることができます。

// マッチするURL  /users/5 , /users/25
{ path: '/users/:userId(\\d+)' },
// マッチしないURL /users/ほげ

パラメータ指定のルーティングにrouter-linkでアクセスさせる

パラメータ指定のルーティングにrouter-linkでアクセスさせるにはオブジェクト形式で値を渡し、後述するnameプロパティにルーティングの名称を、paramプロパティに値をセットすればOKです。直接pathプロパティにURLを直書きしてもOKです。

<router-link v-bind:to="{ 
  name: 'post',
  param: {id: 2 } 
}
">クリック</router-link>

URLのパラメータを任意にする

URLの末尾に「?」をつけることでそのURL階層に指定があってもなくても許可することができます。

// マッチするURL  /users , /users/25
{ path: '/users/:id?' },

全てのURLにマッチさせる

path: "/*",

全てのURLにマッチさせるには「*(アスタリスク)」を使います。ルーティング設定の一番最後にこの全てにマッチするルーティングを設定しておけば、予期せぬアクセスを全て404ページ(作成した404コンポーネントを紐づける)に促すと言ったことが可能になります。

{
  // ルーティングしていないアクセスは全て404ページ
  path: "/*",
  component: NotFoundComponent,
  name: "404",
},

componentプロパティでできること

componentプロパティにはそのURLにアクセスされた時にrouter-viewに紐付けさせたいコンポーネントを指定します。コンポーネントは先にimportで読み込んでから指定します。

import TimeLineComponent from "./components/timeline.vue";

{
  path: "/timeline",
  component: TimeLineComponent,
  name: "Timeline",
},

先述しましたがrouter-viewにname属性がついていた場合、name属性が無しはdefaultでname属性があるものはその名前で紐付けするコンポーネントを設定できます。その際はcomponentsと「s」つきになるので注意してください。

nameプロパティでできること

{
  path: "/post",
  component: PostComponent,
  name: "post",
},

nameプロパティはルーティングに名前をつけることでこの設定を名前指定だけで呼び出せるようにすることができます。

<router-link v-bind:to="{ 
  name: 'post',
}
">クリック</router-link>

router-linkではオブジェクト形式の値を渡すことも可能なので上記のように指定したいルーティングの名前を渡すだけで使えるようになります。

propsプロパティでパラメータを渡す

{
  path: '/post/:id', 
  component: PostComponent, 
  props: true 
}

propsプロパティをtrueにすることでURLパラメータをコンポーネント側のprops経由で受け取ることができるようになります。後述する$routeオブジェクトを意識せずとも使えるので直感的に操作できるのがメリットです。

PostComponent

<template>
  <div>
      <h2>記事No：{{ id }}</h2>
  </div>
</template>
 
<script>
  export default {
    props: {
      "id"
    },
  };
</script>

$routeオブジェクトの場合

$routeオブジェクトの場合はURLパラメータを$route.params.パラメータ名で取得することも可能です。

<template>
  <div>
    <h2>記事No：{{ $route.params.id }} </h2>
  </div>
</template>

メタ属性を設定するプロパティ

{
  path: "/top",
  component: TopComponent,
  name: "top",
  meta: { title: 'トップページ', desc: 'このページはトップページです。' }
},

メタ属性とはHTMLのhead内に記述するWebページの情報(タイトルや説明、キーワードなど)です。metaプロパティの中に設定したいメタ属性の名前と値を渡すことでそのルーティング使用時に変更することができます。

$routerオブジェクトから取得できる値

$routeオブジェクトとはコンポーネント内で使用できるアクティブになっているルートの情報(アクティブになっているURLやURLパラメータ、クエリ情報など)を保持しているオブジェクトです。

// 例
$route.fullPath
$route.params.id

$routeオブジェクトで取得出来る値

$routerインスタンスから取得できる値

$routeオブジェクトと似ている$routerインスタンスはルーター機能(ページ変移やリダイレクトなど)を実現するためのインスタンスです。

// 例
$router.back()
$router.push(URL)

$routerインスタンスで取得出来る値

ページ変移の履歴(いわゆる閲覧履歴)はスタック形式で管理されているため、履歴スタックと呼びます。先述したHistory APIがまさしく履歴スタックを操作できるメソッドやプロパティを提供してくれるオブジェクトです。

長くなってしまったので今回はここまでにしておきます。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。