名前付きビュー（Named Routes）を使えばVue-Routerの中で、複数のrouter-viewを使用する事が可能です。
活用例
例えば、複数のコンポーネントで構成される画面が画面ごとに変わる場合等に活用できます。（ヘッダとコンテンツ部がある画面で画面ごとにヘッダ内容が微妙に違う等）
実装
router.js
router-viewを複数使用したいURLにおいて、component要素をcomponentsという要素に変更して下記のように記述します。defaultが通常のコンポーネントで、default以外が名前付きビュー（下記例で言えばheader）になります。
|
1 2 3 4 5 6 |
routes: [{ path: '/', components: { default: コンポーネント1, header: コンポーネント2 } }, |
SFC側
「name="名前付きビュー名"」という属性を付加します。
|
1 2 |
<router-view name="header"></router-view> <router-view></router-view> |
Vue Routerの発展的な機能
基本的なページ遷移の機能の他に下記のような機能があります。
- ネストしたルーティング
- リダイレクト
- エイリアス
- HTML5 History APIとURL Hashによる履歴管理
- 自動でCSSクラスがアクティブになるリンク
- Vue.jsトラジションによるページ遷移時のトラジション
- スクロールの振る舞いのカスタマイズ
ネストしたルーティング
routes[]の配下にchildren:[]を使用することでネストしたルーティングも可能になります。「<router-view>」で表示させたコンポーネントの中にさらに「<router-view>」を直接記述しても動作しないので必ずそのようにコンポーネントの入れ子構造にしたい場合はchildrenを使用するようにしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
const router = new VueRouter({ routes:[ { path:"/",component:コンポーネント1, children:[ { path:"サブURL",component:ネストさせるコンポーネント } ] } ] }) |
リダイレクト
通常のWebアプリと同様なリダイレクト機能です。実行した際にURLを書き換えます。
用途
いずれのページのルーティング情報にもマッチしなかった場合に「Not Foundページ」を作成するのに便利です。
エイリアス
URLは書き換えずに別のコンポーネントへのルーティング処理を行います。
用途
URLは変えたくないが、別のコンポーネントで処理させたい場合に使えます。
履歴管理
Vue.jsではサーバー側のルーティングを介していないためブラウザの戻る進むの履歴管理もクライアント側で行う必要があります。実現には二つの方法があります。
- URL Hash
- HTML5 History API
URL Hash
Vue Routerを使った場合のデフォルトはこれになっています。URLの末尾に#が付与されます。（実際に取得されているHTMLとしては#前のURLのみになります。#後の文字列に関しては取得したHTML内のJavaScript処理で使用しています。）
ブラウザの戻るボタンが押されたらhaschangeイベントを使ってルーティングを変更します。
HTML5 History API
URLに#は付与されません。ただ、ユーザーが直接URLにアクセスした際にサーバー側がエラーを起こさずに適切にSPAページを返すよう実装しなければいけません。その際は、NgnixやApache等でどんなアクセスがあった場合でもindex.html（シングルページ）を返すようなルーティング設定を行う必要があります。（公式ページに載っています。）
この記事へのコメントはありません。