Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
48
Help us understand the problem. What is going on with this article?
@tseno

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入門 基礎から実践アプリケーション開発まで

48
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tseno
Java、Kotlinのフリーランスエンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
48
Help us understand the problem. What is going on with this article?