vue-routerチートシート

関連:

• Vue.jsチートシート(基礎編)
• Vue.jsチートシート(コンポーネントと構成編)

Vueチートシートに引き続き公式チュートリアルの抜粋です。

参考

• 公式

概要

• vue-router = Vue.jsにおける公式のルータ

  • SPAのためのページルーティング機能を提供する

• 公式によると以下を特徴としている:

  • ネストされたルート/ビューマッピング
  • モジュール式、コンポーネントベースのルータ構造
  • ルートパラメータ、クエリ、ワイルドカード
  • Vue.js の transition 機能による、transition エフェクトの表示
  • 細かいナビゲーションコントロール
  • 自動で付与される active CSS クラス
  • HTML5 history モードまたは hash モードと IE9 の互換性
  • カスタマイズ可能なスクロール動作

導入

• CDNを unpkg.com が提供している

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- Vue.js本体の後に記述すると自動ロードされる -->
  <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
  

• webpack環境の場合はnpmを利用できる

  $ npm install vue-router
  

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  // use()によって明示的にロードする
  Vue.use(VueRouter)
  

基本

• HTML側は:

  • <router-view> コンポーネントに現在の画面が表示される
  • <router-link> コンポーネントで画面遷移を明示する

  <div id="app">
    <p>
      <router-link to="/foo">Foo</router-link>
      <router-link to="/bar">Bar</router-link>
    </p>
  
    <router-view></router-view>
  </div>
  

• js側は:

  • VueRouter を作成しrootインスタンスに渡すことでルーティングを設定する

    // ルーティングを定義する
    const router = new VueRouter({
      routes: [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
      ],
    })
    
    // rootインスタンスに渡す
    const vm = new Vue({
      router
    }).$mount('#app')
    

  • this.$route でそのルーティングの情報、 this.$router でルーティング全体の情報にコンポーネントからアクセスできる

    export default {
      computed: {
        username () {
          return this.$route.params.username
        }
      },
      methods: {
        goBack () {
          window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
        }
      }
    }
    

ルーティング方法

動的なマッチング

• Rails等と同じく、コロン : を使ってパラメータを含むルーティングを設定できる

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

• URLが含むパラメータは $route.params で参照できる

  const User = {
    template: '<span>{{ $route.params.id }}</span>'
  }
  

• 同じrouteの異なるパラメータで画面遷移しても、vue-routerは画面を再描画しない

  • ライフサイクルフックが呼ばれないため、変更を検知したい場合はwatchを使う

  {
    watch: {
      '$route' : (to, from)=> ...
    }
  }
  

• マッチパターンのワイルドカードとして * が使える

  • マッチしたパターンは $route.params.pathMatch で参照できる
  • ルーティングは先に宣言されたパターンのほうが優先される

  const router = new VueRouter({
    routes: [
      { path: '/user-*', component: User },
      { path: '*', component: NotFound },             // 全てにマッチ
    ]
  })
  

ネスト

• ネストされたルーティングに対し、 <view-router> もネストすることで対応できる

  <div id="root">
    <!-- トップレベル -->
    <router-view></router-view>
  </div>
  

  const User = {
    template: `
      <div class="user">
        <!-- 2階層目のview -->
        <router-view></router-view>
      </div>
    `
  }
  
  const router = new VueRouter({
    routes: [
      {
        path: '/user/:id',
        component: User,
        children: [
          // /user/:id/profileにマッチした時に2階層目のrouter-viewに表示される
          { path: 'profile', component: UserProfile }
  
          // /user/:id の場合に2階層目に表示させたい場合
          { path: '', component: UserDefault }
        ]
      }
    ]
  })
  

同階層に複数のviewを配置する

• 複数のviewを並列したい場合は名前をつけて管理する

  <!-- 未指定は "default" となる -->
  <router-view ></router-view>
  <router-view name="a"></router-view>
  <router-view name="b"></router-view>
  

  // ルーティングの際にcomponentではなくcomponentsを指定する
  const router = new VueRouter({
    routes: [
      {
        path: '/',
        components: {
          default: Foo,
          a: Bar,
          b: Baz
        }
      }
    ]
  })
  

コードによる制御

vue-routerのページ履歴はES標準の window.history に近似する

• <router-link> によって静的なリンクを作成するほか、コードにより画面遷移をトリガできる

  // 単純な遷移
  this.$router.push('/user/123')
  
  // 名前による指定
  // /user/:id のrouteがあった場合に /user/123 に遷移する
  this.$router.push({ name: 'user', { id: '123' }})
  
  // パラメータを渡す
  // /foo?bar=baz
  this.$router.push({ path: 'foo', query: { bar: 'baz' }})
  

• replace() を使うとhistoryにURLをスタックせずに遷移できる

  this.$router.replace('/user/123')
  

  <!-- router-linkも同様にreplace指定できる -->
  <router-link to="/foo" replace></router-link>
  

• go() を使うと指定した数のスタックを進んだり戻ったりできる

  // 進む
  this.$router.go(1)
  
  // 戻る
  this.$router.go(-1)
  

名前付きのroute

• routeには名前をつけることができる

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

• つけた名前は <route-link> あるいは $router.push() で指定できる

  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
  

  router.push({ name: 'user', params: { userId: 123 }})
  

リダイレクト

• リダイレクトを設定できる

  const router = new VueRouter({
    routes: [
      { path: '/a', redirect: '/b' }
    ]
  })
  
  // 動的にリダイレクトさせることもできる
  const router = new VueRouter({
    routes: [
      { path: '/a', redirect: to => {
        return '/b'
      }}
    ]
  })
  

エイリアス

• エイリアスはリダイレクトと異なり、最初にアクセスしたURLを書き換えない

  // /b にアクセスするとURLはそのまま、/a の内容が表示される
  const router = new VueRouter({
    routes: [
      { path: '/a', component: A, alias: '/b' }
    ]
  })
  

$route をpropsで渡す

• this.$route をコンポーネント内で直接付参照すると、特定のrouteとコンポーネントが密結合してしまう

  • propsを介してroute固有の情報を受け渡すことで、結合を疎にできる

  const User = {
    // $this.route.params.idを直接参照しなくていいので、その他の方法でIDを渡すこともでできる
    props: ['id'],
    template: '<div>User {{ id }}</div>'
  }
  
  const router = new VueRouter({
    routes: [
      // props設定を有効にすることで、$route.paramsの内容がそのままpropsとして渡る
      { path: '/user/:id', component: User, props: true },
  
      // Functionで指定することもできる
      { path: '/user/:id', component: User, props: (route) => (...) },
    ]
  })
  

HTML5 History

• routerはhashモードとhistoryモードがある

  • hash: デフォルトのモード。内部的なハッシュを使って画面遷移をコントロールする
  • history: HTML5のhistoryオブジェクトの機能を利用するモード。hashと同じくページはリロードされないが、URLが書き換わる

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

• historyモードはユーザが直接URLを叩くと、サーバが対応できずに404になる可能性がある

  • 404の場合はルートリダイレクトする、などサーバ側の対処が必要になる