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 を応援していただければ幸いです。