search
LoginSignup
468

More than 3 years have passed since last update.

posted at

updated 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()が実行される。

②認証チェックの結果に基づいたページ遷移の実行
認証済みユーザが存在する場合、正常にページ遷移が行われる。
認証済みユーザが存在しない場合、サインインページにリダイレクトされる。

本稿は以上となります。
誤り等ございましたら、ご指摘いただけますと幸いです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
468