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

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

プロパティ内容
$route.pathstring現在ルートパスの文字列(常に絶対パス)
$route.paramsObject動的セグメントとスターセグメントの key/value ペアを保持するオブジェクト
$route.queryObjectクエリ文字列の key/value ペアを保持するオブジェクト
$route.hashstring現在のルートの hash
$route.fullPathstringクエリや hash を含む全 URL
$route.matchedArray現在のルートのネストされた全パスセグメントに対しての ルートレコード を保持している配列
$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:{}

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

2020-03-26
  • vuejs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs スクロールでナビバー表示非表示
vuejs 開発時に遭遇したエラーリスト
nuxt cordova web ハイブリッドアプリ作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定