BookmarkLINEVue.jsでSPAを開発していくにあたりURL履歴イベントをブラウザ内に構築する為のVueRouterというライブラリが提供されています。今回は、VueRouterを用いたVue.jsアプリケーション開発の基本(ルーティングなど)を見ていきます。今回の開発環境は以下の通りです。Routerの公式ガイドの内容にも少し沿いながら進めるので、用語など少し似たようにしています。道中詳細な説明が足りないと感じたら、都度公式ガイドを参照してみてください。VueRouterなのかSPA(シングルページアプリケーション)は単一ページでのアプリケーションのため、操作的には機能や画面を切り替えられてもURL的な履歴を持つことが出来なかった。VueRouterを用いることでURL履歴イベントをブラウザ内に構築する事ができる。ブラウザで「戻る」「進む」の操作が行え、ユーザビリティを向上させる事ができる。各画面や機能を個々のページとして認識させる事ができ、SEO的にも有利になる。CLIを用いてプロジェクトのセットアップを行います。対話形式でプロジェクトを作成していきます。以下のvueコマンドを叩きます。Router導入に必要な箇所のみ抜粋します。featuresを選択しENTERを押下します。TestingRouterをスペースキー押下でアクティブにしENTERを押下します。入力しENTERを押下します。Routerに関する設定はこれだけなので、あとは好みの設定で進めてください。プロジェクト作成に関しての詳細は以下でも紹介しています。CLIでプロジェクトを作成インストールが完了したら、以下のコマンドを叩いて環境を立ち上げます。serve起動したらブラウザからアクセスします。Routerを使っていきます。ベーシックルーティングまずは最も基本的なルーティングから。表示させるためだけのコンポーネントをひとまず3つ用意しておきます。</div></template>ルーティングを定義します。]})ナビゲーション部分です。}</style>router-linkコンポーネントを使ってナビゲーションを定義します。toプロパティで遷移先を指定します。router-viewコンポーネントによって、ルーティングで定義されたコンポーネントが描画されます。router-linkの定義には色々なバリエーションで行う事ができます。https://router.vuejs.org/ja/api/#router-link-props一通り実装したので、ブラウザから確認してみます。サンプルページナビゲーションのリンクを押下すると画面を切り替える事ができます。何回か遷移した後で「戻る」や「進む」をしてみると、履歴に沿って遷移する事を確認できました。動的ルートマッチングルーティング時にURLパラメータの値を取りたい。そんな時のルーティングです。}]:パラメータ名で取得するパラメータを指定します。page2のように、複数指定する事もできます。to="/page2/2/hoge/20">page2</router-link></div>ナビゲーション部分のtoに、静的、または動的にパラメータをセットします。</div></template>コンポーネントでは上記のようにして受け取ったパラメータを表示させる事が出来ます。script内で使用したい場合も以下のようにして取得する事ができます。this.$route.params.param1ブラウザから確認してみます。サンプルページURLからパラメータを取得できた事を確認できました。catch-allフォールバックここで一つの問題に直面しました。アプリケーションのルート”/”(今回の例ではHome)以外(Page1/Page2)を表示させた状態でリロードを行うと404エラーになってしまいます。リロードと同じく、直接URLを入力してブラウザからアクセスしても同様に404エラーです。これは、このアプリケーションがSPAであり、/index.htmlのみが実体として存在しているだけなので、単純にアクセス先が無い状態であるからです。catch-allフォールバックで404を任意のページで受け止める方法で解決出来ます。SSRやプリレンダリングはまた別の機会に触れるとして、今回はcatch-allフォールバックでこの問題を解消してみます。catch-allフォールバックについては、公式ガイドでは以下のようにサーバーの設定例が紹介されています。今回はApacheの設定を行ってみます。</Directory></VirtualHost>RewriteBaseはディレクトリごとの設定ファイルでのみ有効なので、こんな感じでしょうか。</Directory></VirtualHost>こっちは1行で済むのは手っ取り早い感じはします。こんな感じで設定を行えば、リロードや直接アクセスしてもindex.htmlに流れるので404エラーにはならなくなります。これだけだとちょっと簿妙です。定義していないURLの場合は素直に404ページに遷移させたい。そこで次の「全マッチのルーティング」が使えます。全マッチのルーティング全マッチのルーティングは、ルーティングで定義していない全てのURLへのリクエストをキャッチするルーティングです。仮の404ページを用意して、そこへ定義済みではない全てのルーティングを渡すようにしてみます。]})作成した404.vueをimportします。pathをアスタリスクで指定し、NotFoundコンポーネントをセットします。これで、これまでに定義した3つのルーティング以外のリクエストは全てNotFoundコンポーネントへ向きます。router.jsで定義するルーティングは、上に定義されたものほど優先度が高くなります。(上から評価されていく)こうする事でSPAでも、直接のアクセスやリロードに対応しつつ、定義してないURLに対しては404ページを表示する事が可能になりました。切り替えたいところです。今回はvue-headというライブラリを導入しmetaタグの設置を行い、それをVueRouter切り替えていくという流れでいきたいと思います。OGPのタグやdescriptionのタグを挿入したい場合にあれこれする必要があってちょっと手間です。vue-headを使うとその辺を簡単にしてくれるのでおすすめです。vue-headhttps://github.com/ktquez/vue-headインストールvue-headのインストールを行います。プロジェクトルートで以下npmコマンドを叩きます。vue-headmetaタグの設置まずは基本的なmetaタグの設置を行います。切り替えたいものも含め、まずはここでデフォルトを定義します。'デフォルトのdescriptionです。}}).$mount('#app')どんな項目を定義できるのかは以下から確認できます。https://github.com/ktquez/vue-head#examples-new-syntaxこれだけで、まずはmetaタグが設置されます。titleやmetaの切り替え次に、titleタグやmetaを画面の切り替えと共に変更させていきます。今回は、titleタグとdescriptionを切り替えます。ルーティング部分に、渡したいmeta情報を定義します。}]次に、routerのルートコンポーネントに値をセットする処理を追加します。}</script>ブラウザからアクセスして確認してみます。サンプルページルーティングでの切り替えによって、タイトルやmetaタグが切り替わっている事が確認できました。Googleインデックス検証ここで、分けた画面分、問題なくGoogleにインデックスされるかを検証してみました。別ページとしては認識されましたが、タイトルが意図通りにインデックスされませんでした。「app」となっているのはデフォルトで設定したタイトルです。Page3だけはタイトルが表示されていますが、これはおそらく設定したタイトルではなく、h1タグから拾われたものであると推測できます。これはおそらく切り替えるタイミングの問題で、現在のような、通常の切り替えでは遅いのでしょう。いう事で、ナビゲーションガードを利用して、そこで切り替えるように変更します。ナビゲーションガードナビゲーションガードは、ナビゲーション解決フローの中で発火するライフサイクルメソッドです。ナビゲーション開始から終了までの間でそれぞれ決められたメソッドが発火していきます。今回はここを利用して、適切なタイミングでタイトルなどmeta内容の切り替えを行います。ナビゲーションガードhttps://router.vuejs.org/ja/guide/advanced/navigation-guards.html問題は「いつ」書き換えを行うかですが、descriptionの切り替えはDOM操作を行っているので、切り替える機能(画面)のDOMが構築されてからその処理を挟みたいところです。いう事で、結果がわかりやすいようにまずは切り替えたいタイトルなどの文言を、改めて定義し直します。}]次に、コンポーネント内ガードであるbeforeRouteEnterでmeta書き換えの処理を行います。DOM書き換えを行っているのでコンポーネントがアクティブになってから処理を走らせる必要がある(そうでないと書き換え対象が見つからず処理が失敗する)為です。これらは各コンポーネントに適用させる為、スクリプトをMixinで切り出します。}}先に定義してあったApp.vueのスクリプトは不要なので除去してしまいます。*/</script>最後に、各コンポーネントでMixinを読み込みます。}</script>これで切り替えのタイミングを調整できたので再ビルドし、改めてGoogleへのインデックス検証を行いました。意図通りにGoogleへインデックスさせる事ができました。まとめ今回は環境構築と基本的な使い方から、ちょっとした検証までを行いました。VueRouterの基本的な機能はまだたくさんあるので、また別の機会にまとめるつもりです。CLIでVue.jsの開発環境をサクッと構築する(Vuex/VueRouter/SFC)Vue.jsでドラッグアンドドロップによる要素の並べ替えと移動を実装するLaravelにReactを導入する。SESを使ってAPIメール送信を行う(Mailableクラス&SimpleEmailService)2019.12.3MySQL8.0.16で追加されたCHECK制約を試してみる。RitoLaboこのサイトについて利用規約プライバシーポリシ。