APIを用いたHistory管理と、SPAでありながら画面切り替えの挙動を持つ事が出来ます。今回は、VueRouterの基本的なルーティングパターンを見ていきます。今回の開発環境は以下の通りです。3.x今回は、VueRouterの公式ガイドに沿って各々のルーティングを見ていきたいと思います。多少順番は前後しますがなるべく同じワードを使うようにしているので、より詳細を確認したい場合は併せてそちらも参照すると良いと思います。VueRouter公式ガイドhttps://router.vuejs.org/ja/また、開発環境や最もベーシックなルーティングに関しては以下を確認してください。VueRouterの基本とルーティングを構築するはじめの一歩ルーティングをネストする途中まで同一のルーティングで、そこからバリエーションが生まれたりするルーティングはネストできます。</div></template>Product.vueにて、Productに関連するリンクを生成しています。rootであるAppのルーティングからさらにネストしている状態です。]})Productのルーティングにてchildrenプロパティを定義し、子(ネスト)のルーティングを定義しています。任意のアクションなどからHistoryを操作し、ブラウザの「進む」「戻る」を実行できます。}</script>以下、1つずつ解説していきます。this.$router.forward()forward()メソッドでブラウザの履歴を1つ進める事が出来ます。this.$router.back()back()メソッドでブラウザの履歴を1つ戻す事が出来ます。number)go()メソッドでブラウザの履歴を引数に渡した数値の分だけ進めるたり戻す事が出来ます。負の数を指定すれば「戻る」になります。サンプルページまた、任意のコンポーネントへ遷移させる事もできます。渡す事でそのコンポーネントへ遷移しますが、両者の違いは、遷移時にURL履歴に「追加する」か、現在のHistoryを「上書きする」かです。replace()を行った場合は、現在居るPage05の履歴を上書きするので、back()を行うとPage04に戻る事になります。リダイレクト・エイリアス任意のルーティングに対してリダイレクトを設定できます。nameで指定]リダイレクト先はpathもしくはnameプロパティで指定できます。踏んだ場合のアクセスは/sampleになります。ルーティングに対してエイリアスを設定する事も出来ます。alias}これで、/smpのルーティングは同じく/sampleになります。サンプルページ名前付きルートルーティングに名前をつけておくと、遷移先の指定の際に便利です。},]nameプロパティを定義しておきます。}</script>nameプロパティを定義しておけば、パスの指定も簡単になります。スクリプト側で遷移させる場合でも名前付きルートが使えます。サンプルページ名前付きビュービューに名前をつける事ができて、ルーティング時にそれらを定義付けて呼び出す事が出来ます。</div></template>router-viewコンポーネントが3つある事に気づくでしょうか。上がこれまで使用してきたデフォルトのビューで、下の2つにはそれぞれ名前がついています。}]componentsプロパティでそれぞれのビューを紐づけてやる事で、狙ったルーティングでそれらを呼び出す事が可能になります。サンプルページちなみに、ネストして少し複雑になったルーティングでも使えます。</div></template>サンプルページルートコンポーネントにプロパティを渡す規模が大きくなってきたり、取り扱うパラメータが増えてくると、this.$route.xxxみたいなのが辛くなってきます。コンポーネントとルーターを分離させてすっきりできるよ。公式ガイドでは3つのモードを紹介しています。https://router.vuejs.org/ja/guide/essentials/passing-props.htmlBooleanモードルーティングでpropsプロパティをtrueにする(Booleanで設定する)方法です。}]これで、いつも使っているpropsの要領でコンポーネント側から利用できるようになります。}</script>サンプルページthis.$route.が不要になりましたね。Objectモードルーティングでpropsプロパティにオブジェクトを渡して利用する方法です。}</script>サンプルページFunctionモードルーティングでpropsプロパティを関数で定義して利用する方法です。定義時に一処理かませたりもできます。URLパラメータは文字列で渡ってくるのでここで予め数値型へキャストする。みたいなこともできる。Routerでの基本的なルーティング記法を見ていきました。いう流れだと思うので、基本はしっかり抑えておきたいですね。CLIでVue.jsの開発環境をサクッと構築する(Vuex/VueRouter/SFC)Vue.jsでドラッグアンドドロップによる要素の並べ替えと移動を実装するLaravelにReactを導入する。SESを使ってAPIメール送信を行う(Mailableクラス&SimpleEmailService)2019.12.3MySQL8.0.16で追加されたCHECK制約を試してみる。RitoLaboこのサイトについて利用規約プライバシーポリシ。