Vue3は現在のルーティングアドレスを取得します

Vue3は現在のルーティングアドレスを取得します

正解

useRouterの使用:

 // ルーターパス: "/user/:uid"
<テンプレート>
  <div>ユーザー</div>
  <p>uid: {{ uid }}</p>
</テンプレート>
 
<script lang="ts">
「vue」からdefineComponentをインポートします。
「vue-router」から useRouter をインポートします。
 
エクスポートデフォルトdefineComponent({
  名前: "ユーザー",
  設定() {
    定数ルーター = useRouter();
    定数 uid = router.currentRoute.value.params.uid;
    戻る {
      // 返されたデータ uid、
    };
  },
});
</スクリプト>

説明する

useRouter() 、vue2 のthis.$routerに似たobjectを返します。

router.currentRouteRefImplオブジェクトで、 refを使用して返されるオブジェクトです。現在のルートには、Vue のthis.$routeと同様に、 .valueを通じてアクセスできます。

console.logを使用して印刷し、次の内容を確認します。

これで、vue3 で現在のルーティング アドレスを取得する方法についてのこの記事は終了です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。

以下もご興味があるかもしれません:
  • Vue ルーティング vue-router の使用方法の説明
  • Vueルータールーティングガードの詳細な説明
  • Vue 学習 - VueRouter ルーティングの基礎
  • Vue でのルーティングガードの具体的な使用法
  • Vue はネストされたルーティングメソッドの例を実装します
  • Vueルーティングを理解するのに役立つ記事

<<:  HTML テーブルに複雑なテーブル ヘッダーを実装するためのサンプル コード

>>:  webkit-box-reflect を巧みに使用してさまざまな動的効果を実現する (要約)

推薦する

MySQL の準同期レプリケーションについての簡単な説明

導入MySQL はレプリケーションを通じてストレージ システムの高可用性を実現します。現在、MySQ...

MySQL で遅いクエリ SQL を見つけて最適化する詳細な例

目次1. 遅いクエリSQLを見つけて最適化する方法a. スローログに基づいてスロークエリSQLを見つ...

HTML サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。定義と使用法: <...

CSS3 で作成した本のページめくり効果

結果:実装コード: html <!-- よろしければハートを付けてください! --> &...

Linux (Ubuntu 18.04) に vim エディタをインストールする方法

デスクトップ システムをダウンロードするには、Ubuntu の公式 Web サイト (https:/...

Linux netfilter/iptables の知識ポイントの詳細な説明

ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...

MySQLテーブル名の大文字と小文字を区別しない設定方法の詳細な説明

デフォルトでは、Linux の MySQL はテーブル名の大文字と小文字を区別します。 MySQL ...

MIME タイプの完全なリスト

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

WebページでjQueryを参照する方法

CDN(コンテンツ配信ネットワーク)を通じて参照できます。 jQuery は Google と Mi...

ウェブページのアクセス速度に関する主な問題と解決策

<br />ウェブサイトのアクセス速度はウェブサイトのトラフィックに直接影響を及ぼし、ウ...

Linux システムで MySQL の文字セットを UTF8 に変更する手順

目次1. データベース内の MySQL ステータスを確認します。 2. 設定ファイルを変更します。 ...

Navicat を使用してリモート Linux MySQL データベースに接続するときに発生する 10061 不明エラーの詳細な説明

Navicat を使用してリモート Linux MySQL データベースに接続すると、不明なエラー ...

MySQL 百万レベルのデータページングクエリ最適化ソリューション

データベースからクエリする必要があるテーブルに数万件のレコードがある場合、すべての結果を一度にクエリ...

MySQL ステートメントの概要

目次1. データベースの使用を選択2. 情報を表示する3. テーブルを作成する4. データを挿入する...

CentOS7 は rpm を使用して MySQL 5.7 をインストールするチュートリアル図

1. 4つのrpmパッケージをダウンロードする mysql-コミュニティクライアント-5.7.26-...