Edited at

今さら聞けない?Vue Router


はじめに

本稿では、Vue Routerのセットアップ、使い方、その他Tipsについて解説します。


Vue Routerとは

Vue.jsを利用したSPA構築で、ルーティング制御をするための公式プラグインです。


導入


マニュアルセットアップ

①npmでインストールする

npm install vue-router

②router.jsを作成する


src/router.js

import Vue from 'vue'

import Router from 'vue-router'
import Home from './views/Home/'

Vue.use(Router)

export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})


パス/にアクセスすると、<router-view>の中身がHomeコンポーネントとして置換される。

また、デフォルトの挙動ではURLに#が含まれるが、mode:historyを指定することでURLからhashを取り除くことができる。

③エントリポイントとなるJavaScriptファイルに記述を追加する


src/main.js

import router from './router' //追加

new Vue({
router, //追加
store,
render: h => h(App)
}).$mount('#app')


プラグインとしての使用を宣言することで、router.jsを他のコンポーネントにおいてインポートすることなくthis.$routerによってVue Routerにアクセス可能となる。


Vue CLI 3によるセットアップ

Vue CLI 3を使用している場合、vue createをする際にvue-routerを選択するとプロジェクト初期化の際に自動的に組み込まれる。

また、vue add vue-routerによって後から組み込みを行うことも可能。


使い方

ルーティング制御によって表示したいコンテンツの場所に、<router-view>タグを記述する。


src/App.vue

<template>

<div id="app">
<global-header/>
<router-view/>
<global-footer/>
</div>
</template>

<script>
import GlobalHeader from './components/GlobalHeader'
import GlobalFooter from './components/GlobalFooter'

export default {
components: {
GlobalHeader,
GlobalFooter
}
}
</script>


例えば、上記のような記述を行うとヘッダー・フッターは常に共通のものが表示され、パスが変更されるとその間に配置された<router-view/>の内容がそのルートにマッチしたコンポーネントとして再レンダリングされる。


ページ遷移


router-linkコンポーネントの利用

<router-link to="/">Go to home</router-link>

遷移先をto属性の値として指定する。

<router-link>タグは<a>タグとしてレンダリングされる。


プログラム的遷移

this.$router.push('/')

Script内で上記の記述を行うことは、前項において記述した<router-link>タグをクリックすることと同値。

this.$router.replace('/')

とすると、historyに追加せず遷移を行うことができる(ブラウザの戻す、進むボタンを利用して遷移した際の挙動が異なる)。


Tips


Dynamic Import

初期ロードの負荷を抑えるためにWebpackのCode Splittingを用いたDynamic Importを使ってみる。


src/router.js

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

function loadView (view) {
return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: loadView('Home')
},
{
path: '/about',
name: 'about',
component: loadView('About')
}
]
})


上記のように変更を行うと、必要に応じてコンポーネントが遅延して読み込まれるようになる。


現在のパスを確認する

this.$router.path

任意のコンポーネントにおいて上記記述を用いることで、現在のパスを取得できる。


画面遷移後のスクロール制御をする


src/router.js

 routes: //...省略,

scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}

例えばルーターオブジェクト内において上記記述を追加すると、ページ遷移ごとにスクロールが上端に戻る挙動となる。

savedPositionはオプションで、指定すると戻る/進むボタンによる遷移を行った際、そのページにいた状態のスクロールが再現される。


認証を確認する

認証済みであることを要求するページコンポーネントに対して、下記のようにルートメタフィールドを追加する。


src/router.js

export default new Router({

mode: 'history',
routes: [
{
path: '/sign-in',
name: 'sign-in',
component: loadView('PageSignIn')
},
{
path: '/',
name: 'home',
component: loadView('Home'),
meta: { requiredAuth: true } //Homeコンポーネントの表示には認証が必要と定義する
}
]
})

ルートメタフィールドのrequiredAuthプロパティがtrueの場合、認証されているかどうかをチェックする挙動を実装する。

main.jsにナビゲーションガードを下記のように追加で記述する。


src/main.js

router.beforeEach((to, from, next) => {

if (to.matched.some(record => record.meta.requiredAuth)) {
Auth.currentAuthenticatedUser() // 認証済みのユーザが存在するかどうかをチェックする関数
.then(() => {
next()
})
.catch(error => {
console.error(error)
next({
path: 'sign-in',
query: {redirect: to.fullPath}
})
})
}
next()
})

挙動は以下のようになる。

①認証チェック

ページ遷移先のルートにおいてrequireAuthがtrueとなっている場合、Auth.currentAuthenticatedUser()が実行される。

②認証チェックの結果に基づいたページ遷移の実行

認証済みユーザが存在する場合、正常にページ遷移が行われる。

認証済みユーザが存在しない場合、サインインページにリダイレクトされる。

本稿は以上となります。

誤り等ございましたら、ご指摘いただけますと幸いです。