Vueページジャンプの実装方法

<テンプレート>
  <div id='テスト'>
    <button @click='goTo()'>クリックして 4 へジャンプ</button>
  </div>
</テンプレート>

// 前のページにジャンプする前にパラメータを渡します:
移動(アイテム) {
  //storageData内のデータは、次のページにジャンプするために使用され、戻るときにジャンプ前のページに戻ることができます。let storageData = {
    検索ワード: this.keyWord,
    ページサイズ: this.paging.pageSize、
    ページ番号: this.paging.currentPage 
  };
  //data のデータは、親子コンポーネントの値転送と同様に、ジャンプ関数を通じてこのページのデータを次のページに適用するために使用されます。let data = {
    タイプ: item.srcType、
    テーブル名: アイテム.テーブル名、
    名前: item.datasourceName、
    テーブルID: アイテム.テーブルID、
    id: アイテム.データソースId、
  };
  //次のページで使用されるすべてのデータを$routerにプッシュします。this.$router.push({
    //nameはジャンプ後のリソースのフロントエンドアクセスパスを示し、queryは使用するデータを格納するために使用されます。pageはこのページの名前です。
    名前: 'オンライン検索',
    クエリ: {targetData: データ、ストレージデータ、
      ページ:'検索',
      isBackSelect: true、
      戻る名前: 'dataSearch'
    }
  })    
}

//ジャンプ後のページのパラメータを取得します:
マウント() {
  // ジャンプ後のページにパラメータが渡されたかどうかを確認します。渡された場合は、必要に応じて console.log(this.$route.query.targetData;) を呼び出します。
}

//メソッドにreturn関数を記述する goBackSheet() {
  if(this.$route.query.goBackName === 'dataSearch'){
    this.$router.push({
      名前: this.pageName、
      クエリ: {
        ストレージデータ: this.$route.query.storageData、
        isBackSelect: true、
      }
    });
  }
}

<!-- 名前付きルート -->
<router-link :to="{ name: 'user', params: { userId: 123 }}" @click.native='goTo'>ユーザー</router-link>

<!-- クエリパラメータを使用すると、以下の結果は /register?plan=private になります -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}" @click.native='goTo'>登録</router-link>

時計：{
   $route(宛先、送信元){
      //ページを更新します this.$router.go(1);
   }  
}