# 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 - 名前がある場合の現在のルートの名前
$route.redirectedFrom - あれば、リダイレクト元の名前

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

関連記事

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