Vue(submit)

handlePager(page: number) {
      const currentPage = new URL(window.location.href)
      currentPage.searchParams.set('page', String(page))
      window.location.href = currentPage.toString()
    },
    handleSearchSubmit(currentPage: { searchQuery: string }) {
      const searchParams = new URLSearchParams()
      searchParams.append('searchQuery', currentPage.searchQuery)
      const currentUrl = new URL(window.location.href)
      window.location.href = `${currentUrl.pathname}?${searchParams.toString()}`
    },
    handleSearchCancel() {
      this.isSearchFormVisible = false
    }

このコードは、指定された currentPage オブジェクトから searchQuery プロパティの値を取得し、それを現在のウェブページの URL にクエリパラメータとして追加して、ページを再読み込みする役割を果たしています。以下はその具体的な動作を説明します:

handleSearchSubmit 関数は、currentPage という引数を受け取ります。この引数は、searchQuery という名前のプロパティを持つオブジェクトです。

searchParams という新しい URLSearchParams オブジェクトを作成します。これは、URL のクエリパラメータを操作するための組み込みのブラウザAPIです。

searchParams.append('searchQuery', currentPage.searchQuery) は、searchQuery プロパティの値を searchParams オブジェクトに追加します。これにより、URL のクエリ文字列に searchQuery パラメータが追加されます。

currentUrl という新しい URL オブジェクトを作成します。これは、現在のウェブページの URL を取得します。

window.location.href を使用して、ウェブページの URL を再構築します。新しい URL は、現在のパス名 (currentUrl.pathname) にクエリパラメータ (searchParams.toString()) を追加することで生成されます。

最終的に、window.location.href によってブラウザは新しい URL に遷移し、ページが再読み込みされます。このとき、新しいクエリパラメータと共に searchQuery の値が含まれます。

このコードは、検索フォームなどで検索クエリを入力し、そのクエリを使ってページを再読み込みするための一般的な手法です。ユーザーが検索クエリを入力して送信すると、現在のページの URL にクエリパラメータが追加され、それによって検索結果を表示するページが再読み込みされます。