Vue ルーティングフォールバックに最適なソリューション (vue-route-manager)

ルーティングマネージャー

各ジャンプのvue-route名を記録し、フォールバックを処理するための組み込みメソッドを備えているため、指定されたページに簡単にフォールバックできます。

背景

著者が開発したプロジェクトでは、さまざまな派手なジャンプによく遭遇します。たとえば、ガイドページでの選択操作から最終的な提出とレビューまで、途中に無数のページがあり、途中の操作が異なっていても、最終的なロールバックの深さが異なります。

プロジェクトの出発点が選択ページであり、最終的に提出ページに到達し、元のページ（選択ページ）に戻ると仮定します

ページを選択 --> B --> C --> ページを送信
ケース1: 選択から送信まで、BとCを経由します。この時点で、Aに戻るにはrouter.go(-3)を呼び出す必要があります。
----------------------------------------
​
ページを選択 --> B-1 ------> ページを送信
ケース2では、選択から送信までB-1のみが発生します。この時点で、go(-3)は適用されなくなります。このとき、2番目のケースを区別するためにクエリパラメータ（チャネルID）が追加されることがあります。
----------------------------------------
​
ページを選択 --> B-2 --> C-2 --> C-2-1 --> ページを送信
この場合、go(-3) は適用できないだけでなく、クエリ パラメータに追加の型が必要です。後でさらに多くのチャネルを区別する必要がある場合は、次のように考えることができます...

現時点では、RouteManagerプラグインを使用して、一連の複雑な問題を処理できます。

はじめる

 npm i vue-route-manager -S

 'vue' から Vue をインポートします
 ​
 // ルートマネージャをインポートします import VueRouteManager from 'vue-route-manager'
 ​
 // Vue にマウントします Vue.use(VueRouteManager, { /* ...ManagerOptions */ })
 ​
 // ページのこの時点では、this.$RouteManager を使用してマネージャーにアクセスできます。

ManagerOptions パラメータ

例

ホームページ

ルート情報 { パス: '/home'、名前: 'home'、コンポーネント: Home }

 <テンプレート>
  <button @click="jump">次のページ</button>
 </テンプレート>
 <スクリプト>
 エクスポートデフォルト{
    メソッド: {
       ジャンプ（）{
          //ホームページの名前を記録する
          this.$RouteManager.setHome('home')
          this.$router.push({ name: 'page-1' })
      }
    }
 }
 </スクリプト>

ページ-1 ページ

ルーティング情報 { パス: '/page_1'、名前: 'page-1'、コンポーネント: Page-1 }

 <テンプレート>
  <div class="page-1">
  ページ1
  <button @click="$router.push({ name: 'page-2' })">次のページ</button>
  <button @click="$router.replace({ name: 'page-1' })">リダイレクト</button>
  </div>
 </テンプレート>

ページ2

ルート情報 { パス: '/page_2'、名前: 'page-2'、コンポーネント: Page-2 }

 <テンプレート>
  <div class="page-2">
  ページ2
  <button @click="$router.push({ name: 'page-3' })">次のページ</button>
  <button @click="backToHome">ホームに戻る</button>
  </div>
 </テンプレート>
 <スクリプト>
 エクスポートデフォルト{
    メソッド: {
       ホームに戻る(){
          // 最初のレコードのホームページに戻るには backHome を呼び出します this.$RouteManager.backHome()
      }
    }
 }
 </スクリプト>

ページ3ページ

ルーティング情報 { パス: '/page_3'、名前: 'page-3'、コンポーネント: Page-3 }

 <テンプレート>
   <div class="page-3">
    ページ3
     <button @click="$backToHome">ホームに戻る</button>
     <button @click="backToPage">ページ 1 に戻る</button>
   </div>
 </テンプレート>
 エクスポートデフォルト{
    メソッド: {
      ページに戻る(){
          // 指定されたページに戻るには backByName を呼び出します (このページを通過している必要があります)
          this.$RouteManager.backByName('page-1')
      },
  ホームに戻る(){
          // 最初のレコードのホームページに戻るには backHome を呼び出します this.$RouteManager.backHome()
      }
    }
 }
 </スクリプト>

問題を解決する

A --> B --> C --> D -- 戻る -> A // ケース 1
|--> B-1 ------> D --Return-> A // ケース 2
|--> B-2 --> C-2 -->C-2-1 --> D --戻る-> A // ケース 3

まず、ページAでthis.$RouteManager.setHome('page-A')またはthis.$RouteManager.setHome()を呼び出します。

次にページ B に戻る必要がある場合は、これを呼び出します。$RouteManager.backHome()

方法

setHome([名前])

• 名前
  • タイプ: 文字列
  • name はルートリスト内の名前を参照します { path: '/page_3', name: 'page-3', component: Page-3 }
  • デフォルト: 現在のルートの名前

最終的に返される必要があるページルート名を設定します

戻るホーム()

ホームページに戻り、setHomeでホームページを設定します。

backByName(名前)

• 名前
  • タイプ: 文字列
  • name はルートリスト内の名前を参照します { path: '/page_3', name: 'page-3', component: Page-3 }

指定した名前のページに戻る

要約する

これで、Vue ルーティング フォールバックに最適なソリューションである vue-route-manager に関するこの記事は終了です。Vue ルーティング フォールバックに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。