#nuxtjs vue router params query ルートから取得できるもの

この類のものの正式の名前はルートオブジェクトプロパティ

プロパティ	型	内容
`$route.path`	string	現在ルートパスの文字列(常に絶対パス)
`$route.params`	Object	動的セグメントとスターセグメントの key/value ペアを保持するオブジェクト
`$route.query`	Object	クエリ文字列の key/value ペアを保持するオブジェクト
`$route.hash`	string	現在のルートの hash
`$route.fullPath`	string	クエリや hash を含む全 URL
`$route.matched`	Array	現在のルートのネストされた全パスセグメントに対してのルートレコードを保持している配列
`$route.name`	-	名前がある場合の現在のルートの名前 (名前付きルート(opens new window))
`$route.redirectedFrom`	-	あれば、リダイレクト元の名前 (リダイレクトとエイリアス(opens new window))

http://localhost:3000/order/1?param=paの URL とする

出力するための HTML

<ul>
  <li>path:{{$route.path}}</li>
  <li>query:{{$route.query}}</li>
  <li>params:{{$route.params}}</li>
  <li>fullPath:{{$route.fullPath}}</li>
  <li>name:{{$route.name}}</li>
  <li>meta:{{$route.meta}}</li>
</ul>

出力

path:/order/1
query:{ "param": "pa" }
params:{ "id": "1" }
fullPath:/order/1?param=pa
name:order-id___ja
meta:{}

#ルートオブジェクトプロパティ

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説よく使われる v-if と v-show の...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie

vuejs i18n の html-lang と font 設定

vue-i18n 多言語対応の際にhtml lang meta 変更と選択言語によってHPフォント...

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejsで円マークカンマ区切りのフィルター作りました。...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

vuejs 開発時に遭遇したエラーリスト

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

vuejs で omisejapan の決済フォーム作成した時のメモ

omisejapanカードペイメントvuejsでフォーム開発する時のメモ...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

vuejs-datepicker 使ってカレンダー表示日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

laravel vuejs 初期設定