Hapicode

# 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

同じタグを持つ記事をピックアップしました。