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

関連記事

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
laravel に vuejs 使うための初期設定

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

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

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

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

vuejs v-if と v-show の違い

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

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

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

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

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

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

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

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

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

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

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

値段をカンマと円マーク表示 vuejs money-format filter 自作

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

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

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

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

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

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

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

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

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

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

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

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
polyfill という宝物で開発時の ie11 対応した時のメモ