❗️ 注意：この記事が作成されてから既に
はじめに
Vueの学習まとめが一段落したので、これからは他の断片的な知識を補足していきます。今回はVue Routerの3つの実装方法について説明します。
プロジェクトの完全なコードを確認する (このプロジェクトにはVue Pluginなどの他のVueテストコードも含まれています)
render関数を使った方法
基本的な考え方は、render関数がアドレスバーのパスに基づいてコンポーネント内容をレンダリングし、HTML5のhistory.pushStateの使用とpopstateイベントの監視を組み合わせることで、直接アドレスへのアクセス/ブラウザの戻る・進む/リンククリックによる遷移といったルーティング機能を実現します。
メリット:
- 存在しないアドレスを404.vueページにリダイレクトできる。
デメリット:
- HTML5のhistory.pushState APIをサポートしていないブラウザではPolyfillできない。
- render関数のレンダリング結果をキャッシュできない。
注意: トランジション効果を使用する場合、ルート要素はdefault.vueに存在します。コード上の違いに注意してください。
componentのis属性を使った方法
原理は上記と同じですが、render関数の代わりにcomponentを使用します。
componentコンポーネントにはis属性があり、どのテンプレートをロードするかを指定できます。この属性は、アドレスバーのアドレスに基づいて動的に設定するロジックを自分で実装できます。
メリット:
- componentにkeep-alive属性を追加してキャッシュできるため、上記のrender関数よりも効率的です。
デメリット:
- HTML5のhistory.pushState APIをサポートしていないブラウザではPolyfillできない。
- 存在しないルートアドレス(404など)をレンダリングできない(そのため、このDemoには上記のような404.vueがありません)
注意: トランジション効果を使用する場合、ルート要素はtpl.htmlに存在します。コード上の違いに注意してください。
VueRouterプラグインを使った方法
VueRouterは公式プラグインで、あらゆるニーズを完璧に実現しています。
メリット:
- 必要な機能がすべて揃っている。
デメリット:
- pushStateをPolyfillするために、パスの最後に#を追加してルーティング機能を実現しているため、真のルーティングではなく、単にhash値を変更しているに過ぎない。
- EOF -
この記事の初出:
Vueでルーティングを実装する3つの方法 - Xheldon Blog
ブログ主より：
人生の重要な選択に直面したとき、最善の方法を誰かが教えてくれて、貴重な時間を無駄にせずに済めばと、私はよく願っています。だからこそ、自分の経験を踏まえて頻繁にブログを書き、広大なインターネットのこの小さな片隅に、私にとって一度きりの人生経験を記録し、助けを求める人々の力になれればと思っています。
