# 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:{}

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

2020-03-26
  • vuejs
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
nuxt cordova web ハイブリッドアプリ作成した時のメモ
Nuxtjs 動的なルーティング静的ページ自動生成
javascript reduce 連想配列の合計計算覚えよう
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs v-if と v-show の違い
vuejs スクロールでナビバー表示非表示
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs 開発時に遭遇したエラーリスト
vuejs で omisejapan の決済フォーム作成した時のメモ
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel に vuejs 使うための初期設定