Posts tagged with router


言わずもがなの公式ドキュメントにあるこの機能の破壊力が素晴らしいという雑記。 ルーティングでコンポーネントを切り替える機能は近頃のフロントエンドフレームワークなら当たり前のように実装されているけれど、その機能自体の破壊力に毎回感動してしまってあまり詳細な使い方までマニュアルを読み込んでいなかった。 そのせいで切り替えるコンポーネントはネストできるものの、1つのパスでは1つのコンポーネント切り替えしかできないものと思い込んでいた。 学習用にシンプルなものを作るならそれだけでも感動してしまう機能だが、webサイトとしての体裁が整ったものを作ろうとするとどうしても手の届かない箇所が出てくる。 メインコンテンツと、離れた場所(サイドバーとか)に表示するけどメインコンテンツと連動して表示を切り替えるツール系メニューなんかはまさしくその一例だろう。ツールバーに表示するタイトル部分をページによって切り替えたい時だってあるかもしれない。 切り替え対象全てを包含するような広い範囲をルーティングによる切り替え対象とすれば一応対応できるが、結局ページをほぼ丸ごと切り替えるような形になりエコではないしSPAとしてもどうなのという疑問が湧いてきてしまう。 こことこことここ、ついでにここもルーティングで切り替えられればいいのになぁと思っていたら普通に公式ドキュメントでやり方が紹介されていた。 あるじゃん、これだよこれ。1パス1コンポーネントなんて面倒な制約を考慮した画面設計なんてする必要なかった。これを使えばメインコンテンツ・ツール問題なんて直感通りのシンプルな方法で解決できてしまう。 公式でもサンプルはあったがちょっと味気なかったからもう少し切り替え感が分かるサンプルを用意してみた。 公式のサンプルを元にしてて素のecma2015が混じってるから対応ブラウザでないと動かないかも。chromeでは動いた。 http://www.miyanokomiya.tokyo/test/etc/vue-router.html#/ リンクをぽちぽち押してみると複数コンポーネントの切り替えイメージが分かるはず。ネストした中での複数コンポーネントももちろん対応してくれる。…