Posted at

Vue.js入門 #08 4章 Vue Routerの高度な機能

More than 1 year has passed since last update.

Vue.js入門 #07 4章 Vue Routerによるシングルページアプリケーション(SPA)

Vue.js入門 作成中


Vue Routerの高度な機能


RouterインスタンスとRouteオブジェクト



  • $router$routeについて、名前が似ているが別のもの。


$router


  • Routerインスタンスを表す。

  • RouterインスタンスはWebアプリケーション全体に1つ存在し、全体的なRouter機能を管理している。

プロパティ/メソッド名
説明

app
ルーターが使用されているrootのVueインスタンス

mode
ルーターのモード(履歴の管理で後述)

currentRoute
Routeオブジェクトとして表される現在のルート

push(location,onComplete?,onAbort?)
ページ遷移の実行。historyスタックに新しいエントリを追加し、ブラウザの戻るボタンがクリックされた際には前のURLに戻る

replace(location,onComplete?,onAbort?)
ページ遷移の実行。historyスタックには新しいエントリを追加しない

go(n)
historyスタックの中でどのくらいステップを進めるか、もしくは戻るのかを表す1つのIntegerをパラメーターとして受け取る。Window.history.go(n)に似ている

back()
historyスタックを1つ戻す。history.back()と同様

forward()
historyスタックを1つ進める。

addRoutes(routes)
動的にルートをルータに追加する


$route


  • Routeオブジェクトと呼ばれるもの。

  • 現在アクティブなルートの状態を保持したオブジェクトで、現在のパスやURLパラメーターなどの情報を取得できる。

  • コンポーネントの内部に実装するRouterのフック関数などからアクセスできる。

  • watchの監視対象としても用いる。

プロパティ名
説明

path
現在のルートのパスに対応した文字列

params
定義したURLパターンにマッチした現在のパラメーターをkey/valueペアで保持するオブジェクト。もしパラメーターが無い場合、この値は空オブジェクトになる

query
クエリ文字列のkey/valueペアを保持するオブジェクト。/foo?user=1というパスの場合、$route.query.user==1となる。もしクエリーがない場合は、空オブジェクト

hash
URLに#によるハッシュがある時の現在のルートのハッシュ値を取得できる。もしハッシュがない場合は、空オブジェクト

fullPath
クエリやhashを含む全体のURL

name
名前付きルートで指定された名前


ネストしたルーティング


  • ルーター定義にchildrenを用いると、入れ子となるコンポーネントを定義できる。

<script src="https://unpkg.com/vue@2.5.17"></script>

<script src="https://unpkg.com/vue-router@3.0.1"></script>
<div id="app">
<router-link to="/user/123">ユーザー123さん</router-link>
<router-view></router-view>
</div>

// ユーザー詳細ページのコンポーネント定義

var User = {
template:
'<div class="user">' +
'<h2>ユーザーIDは {{ $route.params.userId }} です。' +
'<router-link :to="\'/user/\' + $route.params.userId + \'/profile\'">ユーザーのプロフィールページを見る</router-link>' +
'<router-link :to="\'/user/\' + $route.params.userId + \'/posts\'">ユーザーの投稿ページを見る</router-link>' +
'<router-view></router-view>' +
'</div>'
}

var UserProfile = {
template:
'<div class="user-profile">' +
'<h3>こちらはユーザー {{ $route.params.userId }} のプロフィールページです。</h3>' +
'</div>'
}

var UserPosts = {
template:
'<div class="user-posts">' +
'<h3>こちらはユーザー {{ $route.params.userId }} の投稿ページです。</h3>' +
'</div>'
}

var router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})

var app = new Vue({
router: router
}).$mount('#app')


  • 初期状態

image.png


  • ユーザー123さんをクリックすると、コンポーネントUserが表示され、さらにプロフィールページを見るをクリックすると、UserProficeコンポーネントが表示される。

image.png


リダイレクト・エイリアス


リダイレクト


  • 以下のコード例では、/aにアクセスした時、/bにリダイレクトされる。

  • いずれにもマッチしなかった場合、/notfoundにリダイレクトされる。

var router = new VueRouter({

routes: [
{ path: '/a', redirect: '/b' },
{ path: '/b', component: B },
{ path: '/notfound', component: NotFound },
// いずれにもマッチしなかった場合
{ path: '*', redirect: '/notfound' },
]
})


エイリアス


  • 以下はエイリアスの例。/bにアクセスしたときに、/aにアクセスしたかのように振る舞い、コンポーネントAがレンダリングされる。

  • 2つめの例は、エイリアスを複数指定している。

var router = new VueRouter({

routes: [
{ path: '/a', component: A, alias: '/b' },
{ path: '/c', component: C, alias: ['/d','/e'] }
]
})


履歴の管理


  • SPAではサーバー側のルーティングを介していないため、クライアント側で履歴管理しなくてはならない。


URL Hash


  • URL Hashを使った場合、URLの末尾に#/が付与され、ルーティングのパスを管理する。Vue Routerではデフォルト。

  • 直接ブラウザのURLを入力しても、特に処理を工夫しなくても良い。


HTML5 History API


  • HTML5から導入された履歴スタックを操作できるHTML5 History APIがある。

  • URLの末尾に#/が付与されない。直接URLを入力した時に、エラーを起こさず適切にSPAのページを返す処理をしなくてはならない。


  • historyをVue Routerインスタンス生成時にmodeオプションとして指定することで切り替えられる。


Vue Routerを使った大規模なアプリケーションの実装


  • Vue RouterもVuexも使わないアプリケーション


    • 従来型のECサイトのようなサーバー側でルーティングを行い、クライアント側では複雑なコンポーネント構成を持たないアプリケーション

    • サービス紹介サイトなど、一部動的に動くコンポーネント実装が必要なランディングページ(一枚の長いWebページ)



  • Vue Routerのみ使うアプリケーション


    • シングルページアプリケーション(SPA)ベースの管理画面など、各ページでシンプルな機能を提供するアプリケーション

    • ネイティブアプリのようにクライアント側で軽快に動くアプリケーション



  • Vuexのみつかうアプリケーション


    • ダッシュボード、チャット、写真加工アプリなど、1つのページ内で複数のコンポーネント間のデータ連携が必要になる、単一ツールのようなアプリケーション



  • Vue RouterとVuex両方使うアプリケーション


    • メール、カレンダーアプリなど、複数ページで複数コンポーネント構成が想定されるアプリケーション



参考

Vue.js入門 基礎から実践アプリケーション開発まで