はじめに
前節では基本的にvue-routerの基本的な使い方を説明しましたが、コンポーネントがネストしたサブコンポーネントを持つ場合、このネストしたルートはどのように記述するのでしょうか？
おそらくこの文章は状況を直接的に示していないでしょうから、下の例を直接見てみましょう。
ネストされたルーティングの例
まず、3つのコンポーネント、アカウントコンポーネント、他の2つのサブコンポーネントloginとregisterを書きます。
<script> // 1. コンポーネントを定義する。
// 他のファイルからインポートできる
// アカウント・コンポーネントを作成する
var account = {
template: "#account",
}
// ログイン・コンポーネントを作成する
var login = {
template: "<h3>ログイン・コンポーネント</h3>",
}
// 登録コンポーネントを作成する
var register = {
template: "<h3>登録コンポーネント</h3>",
}
これら3つのコンポーネントのルーティングルールを以下のように記述します：
// 2. ルートを定義する
// それぞれのルートはコンポーネントをマッピングする。 ここで "コンポーネント "は
// Vueで.extend() コンポーネントのコンストラクタは，
// あるいは、単なるコンポーネント構成オブジェクトである。
// ネストされたルーティングについては後で説明する。
var routes = [
{ path: '/', redirect: '/account' },
{ path: '/account', component: account },
{ path: '/account/login', component: login },
{ path: '/account/register', component: register },
]
// 3. ルーターのインスタンスを作成し`routes`
// 他のコンフィギュレーション・パラメータを渡すこともできるが、今はシンプルにしておこう。
var router = new VueRouter({
routes, // (省略)はルートと等価である: routes
linkActiveClass: "myactive", // 選択したクラスをカスタマイズする
})
// vueのインスタンスを作成する
var vm = new Vue({
el: '#app',
data: {},
methods:{},
// ローカル・コンポーネントを登録する。 注意：vue-routerを使っている場合は、ここでコンポーネントを登録する必要はない。
components:{},
// vmインスタンスにルーティング・ルール・オブジェクトを登録して、URLアドレスの変更をリッスンし、対応するコンポーネントを表示する。
router, // ルーターに相当する: router
})
</script>
上で見たように、regsterとloginを書くのに使っているルートパスは/account/registerと/account/loginで、実際には/accountルートとはあまり関係ありません。
簡単な接頭辞を書くだけです。
コンポーネント表示用のルータビューの書き方
<div id="app">
<router-link to="/account">Account</router-link>
<!-- ルーティング・エクスポート -->
<!-- ルートでマッチしたコンポーネントは、ここでレンダリングされる。>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<template id="account">
<div>
<h1>これがAccountコンポーネントだ。</h1> <!-- ネストされたコンポーネントのジャンプタブを設定する--。>
<router-link to="/account/login"> </router-link>
<router-link to="/account/register"> </router-link> <!-- ネストされたコンポーネントのルーター・ビューを設定する--。>
<router-view></router-view>
</div>
</template>
ご覧のように、親コンポーネントアプリは account コンポーネントにのみ直接アクセスでき、次に account コンポーネントを通して login と register のネストされたコンポーネントにアクセスできます。
その結果を見てみましょう。
ブラウザでログインコンポーネントをクリックし、アカウントコンポーネントの下にログインコンポーネントが表示されていることを確認します。
実際の結果は以下の通り：
入れ子になったルーティング・ルールを変更するには、children属性を使います。
// 2. ルートを定義する
// それぞれのルートはコンポーネントをマッピングする。 ここで "コンポーネント "は
// Vueで.extend() コンポーネントのコンストラクタは，
// あるいは、単なるコンポーネント構成オブジェクトである。
// ネストされたルーティングについては後で説明する。
var routes = [
{
path: '/',
redirect: '/account'
},
{
path: '/account',
component: account,
// children属性を使って子ルートを実装し、子ルートのパスの前に/をつけない。，
// そうでなければ、リクエストは常にルートパスから始まり、ユーザーがURLアドレスを理解するのに不便である。
children: [
{
path: 'login',
component: login
},
{
path: 'register',
component: register
}
]
},
]
ご覧のように、ログインコンポーネントはAccountコンポーネントの中にネストされています。
もちろん、登録されたコンポーネントも同様です。これにより、優れたネスト・コンポーネントの効果が得られます。
