Routerを使用しているプロジェクトで、プログラムを使用して画面遷移する方法を書いています。最初に通常遷移する方法を記載していて、次にURLパラメータとクエリパラメータを渡して、画面遷移する方法を書いています。API)で遷移する方法を、それぞれ記載しています。サンプルコードは下記のバージョンを使用して検証しています。Routerに設定しているURLを直接指定して遷移する方法です。Routerを使用して遷移するには下記のようにします。}}</script>this.$router.pushに設定したURLを渡して遷移します。APIで書くと、下記のようになります。}}</script>vue-routerからuseRouterをimportします。useRouterを使用して、routerという変数を作っています。画面遷移したい箇所で、作成したrouter変数のpushメソッドにURLを渡して遷移します。URLパラメータ(params)を渡して受け取るURLパラメータを渡して、遷移先の画面で受け取る方法です。URLパラメータは、URLに渡したいパラメータを直接を埋め込む方式です。/user/[名前]/[年齢]のように渡したい場合は、URLは/user/taro/33のようになります。URLパラメータを受け取る前準備URLパラメータを受け取るには、ルーティングの定義時にパラメータを指定しておく必要があります。今回は下記のようにルーティングを作成してみました。routes})URLパラメータを受け取る側のRouterTestSecondコンポーネントのパスの定義にパラメータを埋めています。下記のようにすると、URLの2番目でユーザー名、3番目で年齢を受け取ることになります。/second/:user?/:age??をつけておくことで、NULL許可になり、パラメータがない場合でも画面表示可能になります。上記の場合は、/secondまたは/second/taroや/seconde/taro/22など、いずれかの場合でも画面遷移が可能です。APIを使用して、URLパラメータを受け渡しする方法です。前述したルートに渡すURL設定をやっていないと、渡すことができないので注意してください。API)URLパラメータを渡して遷移する場合は、下記のように指定します。}}</script>this.$routerのpushメソッドにオブジェクト形式で値を渡します。pathプロパティにパラメータを埋め込んだURLを指定しています。上記以外の方法だと、下記のようにparamsプロパティに値を渡してもいいです。この時にはpathではなく、ルートの名前を指定する必要があります。API)受け取る時には下記のようにします。}}</script>this.$routeのparamsに渡された値が入っています。APIで書いてみました。URLパラメータをプログラムから指定して、渡してみます。APIで渡す場合は下記のようになります。}}</script>useRouterをimportして、router変数を作成しました。その後に画面遷移を行うイベントで、router変数のpushに渡したい内容を書いています。APIと同様になります。APIと同様に、下記のようにしてURLパラメータを渡すことも可能です。this.$routerの箇所が、useRouterから作成した変数に変わっただけですね。API)URLパラメータを受け取る時には、下記のようにします。}}</script>最初にimport文でonMountedとuseRouteを読み込んでいます。route変数を読み込んだuseRouteから作成します。任意のタイミングで、route.paramsにアクセスすると渡されたURLパラメータの内容が取得できます。今回はonMountedを使用して、コンポーネントを読み込んだ時に値をコンソールログに出力しています。動作確認をする実際に画面を開いて、動作を確認してみます。初期画面のボタンを押すと、次の画面に遷移してURLパラメータが下記のように渡されていることが確認できました。URLの箇所を確認すると、渡されたパラメータがURLに埋め込まれていることが確認できました。クエリーパラメータ(query)を渡して受け取るクエリーパラメータを渡して、遷移先の画面で受け取る方法です。クエリーパラメータはURLに/test?name=hogeのような形で値を渡す方法です。APIを使用して、クエリーパラメータを受け渡しする方法です。API)画面からクエリーパラメータを渡す方法は下記のようにします。}}</script>this.$router.pushにオブジェクトを渡します。pathプロパティに遷移したいURLを書いて、queryプロパティに渡したい任意の値を書きます。API)値を受け取る場合は、下記のようにします。}}</script>this.$route.queryで渡された値が取得できます。'33'}」となります。APIを使用して行う方法です。APIでクエリーパラメータを渡します。}}</script>まず、useRouterをimportします。router変数をimportしたuseRouterで作成した後に、router.pushでクエリパラメータを渡します。queryプロパティに渡したい値を書きます。APIで書いた時と同じように渡すことができます。API)受け取る時には、下記のようにします。}}</script>まず、useRouteをimportで読み込みます。route変数を読み込んだ、useRouteで作成します。作成したroute変数のqueryに渡されたクエリパラメータが入っています。※渡す方ではuseRouterを使用して、受け取る方でuseRouteを使いますが、typoしそうなので注意が必要そうです。動作確認をするクエリパラメータの方も動作確認してみます。初期画面から次の画面に遷移すると、下記のようにクエリパラメータが渡されていることが確認できます。URLを確認すると/second?user=taro&age=33という形で、クエリパラメータ形式で渡されていることが確認できました。名前付きルーティングについて上記のサンプルで少し出てきましたが、名前付きルートで画面遷移することが可能です。pushに渡すオプジェクトのnameプロパティに、ルーティング設定したとき名前を書いて画面遷移します。})こうすることで、表示したいURLが変わった場合でも各コンポーネントのURLを変えずに、ルーティングの設定箇所のみ変えればいいので便利です。nameを短くしておけば、URLのタイプミスなども減りますし、こちらの名前付きルーティングを使用する方がおすすめです。//Vue.js記事一覧へVue.jsプログラミングシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクPHPPHPで文字列を結合(連結)する4つの方法!PHPで文字列を結合(連結)する方法について書いています。.」を使う・文字列リテラルを使う・imploade関数を使う・join関数を使う(impload関数...プログラミングC++の学習におすすめの本5選!【現役エンジニア選定】C++の学習におすすめの本を5つ紹介しています。C++について簡単に説明して、その後におすすめの本を紹介しました。最後にC++を「どの本で学ぶのが良いか」の考察をまとめていますので、確認してみてください。※Amazonのお試し読みでひとつず...Python【Python入門】定数とは?Pythonでは定数を書けない?Pythonの定数について解説しています。載せているコードについてはPythonのバージョン3.11.0で動作を確認しました。定数とは?定数は、一意の名前に値を関連づけたものです。変数は値が変えたりすることが可能ですが、定数を定義した後には...Python【Python入門】比較演算子について!サンプルコード6つ!Pythonの比較演算子をまとめてみました。最初にそれぞれの比較演算子について解説して、最後に全ての比較演算子を表にまとめています。載せているソースコードはPythonのバージョン3.11.0で確認しました。公式のこちらに値の比較についての...PHPPHPの配列に要素を追加する3つの方法!(array_push)PHPの配列に要素を追加する方法について書いています。PHPの配列に要素を追加するときには、下記の方法を使います。・array_push関数を使う・array_splice関数を使う・代入演算子で入れる記載しているサンプルコードはPHPのバ...JavaScriptJavaScriptで配列に要素を追加する3つの方法!JavaScriptで配列に要素を追加する方法について書いています。配列に要素を追加する時には、下記のメソッドを使います。・pushメソッド(配列の末尾に要素を追加)・unshiftメソッド(配列の先頭に要素を追加)・spliceメソッド(...JavaScriptJavaScriptで文字列の空白を削除する5つのメソッド!JavaScriptで文字列の空白(スペース)を削除する方法について解説します。文字列の空白を取り除くときには、文字列から下記の5つのメソッドを使用することができます。・trim・trimStart・trimEnd・trimLeft・tri...JavaScriptJavaScriptで配列の要素を取得する方法!JavaScriptで、配列の要素を取得する方法について書いています。配列の要素とキーを取得する方法と、配列の要素をループする方法などについて記載しています。配列の要素を取得する要素番号を指定すると、要素を取得することができます。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。API)動作確認をする名前付きルーティングについてVue.jsの学習におすすめの本を選定!【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。Vue.jsの学習に本が必要?Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに使われ...codelikes.com2022.10.23JavaScriptの学習におすすめの本を選定!【現役エンジニアが選定】JavaScriptの学習におすすめの本5選JavaScriptの学習におすすめの本を選定してみました。最初にJavaScriptはどんなものかと、学習に本が必要かを考えて書いてみました。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。