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

この記事からわかること

  • Vue.js Routerで使えるメソッドまとめ
  • リダイレクト方法などを実現するメソッド

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

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="/">

webページのルーティング変移を実現。
実態はHTMLの「a要素」だがクリックされるとページはリロードせずURLとマウントしてるVueコンポーネントが切り替わる

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のモードを選択することができます。

ハッシュモード

ハッシュモードはアクセスする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();

参照先:公式:History API

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プロパティにはオブジェクト形式のルーティング情報を配列の中に格納し渡します。基本となるのはpathcomponentnameです。

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

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

path: "/home",

pathプロパティにはアクセスされる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-viewname属性がついていた場合、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オブジェクトで取得出来る値

メソッド/プロパティ 取得できる情報
path 現在のURL文字列
params URLパラメータの値をkey:valueの形で取得できる
query クエリ文字列をkey:valueの形で取得できる
hash URLに#がある時の現在のルートのハッシュ値を取得できる
fullPath クエリなどを含む全体のURL
name 名前付きルートで指定された名前

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

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

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

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

メソッド/プロパティ 取得できる情報
app ルーターが使用されているrootのVueインスタンス
mode 設定されているモード
currentRoute 現在のルート
push(location,
onComplete?,
onAbort?)
ページを切り替える。履歴スタックに新しいエントリを追加するためブラウザの戻るボタンがクリックされた際には前のURLに戻る
replace(location,
onComplete?,
onAbort?)
ページを切り替える。履歴スタックには新しいエントリを追加しない
go(n) 履歴スタックの中でどれだけステップを進めるまたは戻るのかを数字で指定する
back() 履歴スタックを1つ戻す。ブラウザの戻るボタン
forward() 履歴スタックを1つ進める。ブラウザの進むボタン
addRoutes(routes) 動的にルートをルータに追加

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

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

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index