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 - 名前がある場合の現在のルートの名前 (名前付きルート (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 ハイブリッドアプリ作成した時のメモ

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

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

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

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

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

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

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作

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

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

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

vuejs i18n の html-lang と font 設定

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

vuejs v-if と v-show の違い

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

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

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

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

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

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

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

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

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

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

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

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

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

laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...