Vueルーティング相対パスジャンプメソッド

Vueルーティング相対パスジャンプメソッド

Vueルーティング相対パスジャンプ

今日何か書いていたら多層ルーティングに遭遇しました。ルートを飛び越えるときに相対パスが必要になります。そこで公式サイトを確認したところappend属性とrouter.resolveメソッドを使うとあったので具体的な使用方法を記載しました。

1. 属性の追加

append 属性が設定されている場合、ベース パスが現在の (相対) パスの前に追加されます。

タイプ: ブール値

デフォルト値: false

  • たとえば、/eth(ベースパス)から相対パス/eth/block、/eth—>/eth/blockに移動し、ルートはblockに設定されます。
  • append 属性が追加された場合、完全なパスは /eth/block になります。
  • そうでない場合、フルパスは/blockです

現在のルートが/ethの場合、子の/eth/blockにジャンプします

<router-link to="block" を追加> 
 /eth =====> /eth/ブロック  
</ルーターリンク>

現在のルートが/eth/loginの場合、同じレベルの/eth/blockにジャンプします。

<router-link to="../block" を追加>
 /eth/ログイン =====> /eth/ブロック 
</ルーターリンク>

現在のルートが/eth/blockの場合、前のレベル/ethに戻ります。

<router-link to="../" を追加>
 /eth/ブロック =====> /eth 
</ルーターリンク>

2.router.resolveメソッド

router.resolve(場所、現在値、追加値)

戻り値: ルートオブジェクト

  • 解決されたターゲットの場所 (<router-link> の prop と同じ形式)。
  • current は現在のデフォルトルートです (通常は変更する必要はありません)
  • append を使用すると、現在のルートにパスを追加できます (router-link と同様)
エクスポートデフォルト{
  マウント() {
    //リダイレクトするルートオブジェクトを取得する let routeObj = this.$router.resolve({
        パス: '../'
      },
      this.$ルート、
      「追加」
    );
    //ルート オブジェクトを印刷して表示します console.log(routeObj);
    //ルートジャンプ this.$router.push({
      パス: routeObj.route.path、
      query: { //パラメータIDを次のように渡します: this.id 
   }
    });
  }
}

Vue ルーターの動的ルーティングをクリックしてジャンプパスのアドレスを繰り返し追加する

Vue ルーターの動的ルーティングの記述を練習する際に遭遇する問題

複数回クリックすると、アドレスバーに重複が追加され続けます。

ここに画像の説明を挿入

コードを確認したところ、ページ内の相対パスの先頭に「/」が欠けていることがわかりました。これを追加すると正常に表示されます。

次のように:

ここに画像の説明を挿入

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue ルーティング ビュー router-view のネストされたジャンプの実装
  • Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策
  • Vue のルーティングは履歴操作にカウントされません
  • Vue の同じルートジャンプはルートコンポーネント操作を強制的に更新します
  • Vue でルートをジャンプする方法をご存知ですか?

<<:  MySQL ストアド プロシージャの原理と使用法の詳細な説明

>>:  Win10でIIS10を構成し、ASPプログラムのデバッグをサポートする手順

推薦する

MySQL sql_mode の変更が有効にならない理由と解決策

目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...

シンプルなスネークゲームを実現するネイティブjs

この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

JavaScript でカルーセル効果を実装する

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

Linux でリモート MySQL データベースを手動で展開する方法の詳細な説明

1. mysql をインストールします。次のコマンドを実行して、YUM ソースを更新します。 rpm...

CentOS での mysql5.7 の詳細なインストールと設定のチュートリアル

インストールユーザーにインストール権限があることを確認してくださいルートスイッチなしsuルート(su...

タグが新しいページを開くかどうかという問題。主要ウェブサイトの開設状況をまとめました

a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...

MySQL テーブルスペースとは何ですか?

今日皆さんにお伝えしたいトピックは、「皆さんがよく話題にするテーブル スペースとは一体何でしょうか。...

Centos7 の起動プロセスと Systemd での Nginx の起動構成

Centos7 の起動プロセス: 1.post(電源投入時のセルフテスト) 電源投入時のセルフテスト...

jQuery を使用してカルーセル効果を実装する

本日ご紹介するのは、jQuery を使用してシンプルなカルーセルを実装する方法です。実装の原則は次の...

MySQL で SQL 文の実行時間を表示する方法

目次1. 初期SQLの準備2.MysqlはSQL文の実行時間をチェックします3. さまざまなクエリの...

CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...

CSS で TikTok テキスト揺れエフェクトを実装する例

日々の開発において、フロントエンドの学生はアニメーションやデザインについてよく議論します。デザイナー...

Linux と Windows でスケジュールされたタスクを設定する方法

目次リナックス1. crontabの基本的な使い方2. ログを有効にする3. スケジュールされたタス...

Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)

学習プロセス中にプッシュ イメージが常にタイムアウトすることがわかったため、Alibaba Clou...

MySQL 8.0.26 のインストールとアンインストールの完全なステップバイステップの記録

目次序文1. インストール1.公式サイトからダウンロード2. 構成を作成する3. MySQLを初期化...