言わずもがなの公式ドキュメントにあるこの機能の破壊力が素晴らしいという雑記。

ルーティングでコンポーネントを切り替える機能は近頃のフロントエンドフレームワークなら当たり前のように実装されているけれど、その機能自体の破壊力に毎回感動してしまってあまり詳細な使い方までマニュアルを読み込んでいなかった。
そのせいで切り替えるコンポーネントはネストできるものの、1つのパスでは1つのコンポーネント切り替えしかできないものと思い込んでいた。
学習用にシンプルなものを作るならそれだけでも感動してしまう機能だが、webサイトとしての体裁が整ったものを作ろうとするとどうしても手の届かない箇所が出てくる。

メインコンテンツと、離れた場所(サイドバーとか)に表示するけどメインコンテンツと連動して表示を切り替えるツール系メニューなんかはまさしくその一例だろう。ツールバーに表示するタイトル部分をページによって切り替えたい時だってあるかもしれない。
切り替え対象全てを包含するような広い範囲をルーティングによる切り替え対象とすれば一応対応できるが、結局ページをほぼ丸ごと切り替えるような形になりエコではないしSPAとしてもどうなのという疑問が湧いてきてしまう。

こことこことここ、ついでにここもルーティングで切り替えられればいいのになぁと思っていたら普通に公式ドキュメントでやり方が紹介されていた。
あるじゃん、これだよこれ。1パス1コンポーネントなんて面倒な制約を考慮した画面設計なんてする必要なかった。これを使えばメインコンテンツ・ツール問題なんて直感通りのシンプルな方法で解決できてしまう。

公式でもサンプルはあったがちょっと味気なかったからもう少し切り替え感が分かるサンプルを用意してみた。
公式のサンプルを元にしてて素のecma2015が混じってるから対応ブラウザでないと動かないかも。chromeでは動いた。

リンクをぽちぽち押してみると複数コンポーネントの切り替えイメージが分かるはず。ネストした中での複数コンポーネントももちろん対応してくれる。
調子に乗ってネストしまくったりするとひどいことになる気もするが、我儘なルーティングでもかなり柔軟に実現してくれる可能性を感じる。

すごい。長らくjavascript原理主義なSPAを作ってた身からすると、ルーティングによるコンポーネント切り替えをここまでシンプルに記述できることに驚くばかり。
SPAの枠組みを考えていく上でこういった機能を把握しておくと、実装イメージもかなり湧きやすくなってくるはず。

それにしてもvueは公式で用意してくれているドキュメントがものすごく充実していてすごい。フレームワークとして網羅的なドキュメントを用意するのは当たり前な事かもしれないが、ここまで読みやすく、読んでみようと思えるドキュメントは初かもしれない。
フロントエンド開発で苦労したことはあるけれど、最近のフレームワーク事情には追いつけていないという状態なら読むだけでも相当勉強になるだろう。事実なってる今日この頃。