親コンポーネントでURLのクエリパラメータからページ数を取得して、子コンポーネントでページのリロード後にページャの値を変更する

子コンポーネント内の v-pagination の値を
親要素のリロード時のURLについてる ?page=2 等のパラメータを元に合わせる。

親

親のtemplate

<ChildComponent
  :page-num-to-child="pageNumToChild"
/>

親のdata

data() {
  return {
    page: 1
  }
}

親のmounted

let page = '' // pageパラメータの値としてあとでURLに付加する。
const queryPage = this.$route.query.page // 現在のURLの「?」以降の「page」のパラメータの値を入れる

// queryPageが全部文字列としての数値で帰ってくるため「Number.isInteger(queryPage)」では全部false
// 数値かどうか判定する用
const judgeNumOrNot = /[0-9]+/u
// 数値ならtrue、その他文字列ならfalse
const resultNumOrNot = judgeNumOrNot.test(queryPage)

// pageに「パラメータあり」かつ、「数値である」、かつ「'0'じゃない」時には現在のURLのpageのパラメータの数値を入れる
if (queryPage !== '0' && resultNumOrNot) {
  page = queryPage
  this.page = queryPage
  this.pageNumToChild = Number(page) // 子に渡す（v-paginationの数字の表示のため）
} else {
  page = this.page
}

/**
 * APIコール
 */
this.$router.push({ path: `${this.$route.path}?page=${page}` }) // URLの?page=パラメーターをつける
// APIへリクエスト
await this.storeGetApiRequest()

子

子のtemplate

<v-pagination
  v-model="page"
></v-pagination>

子のdata

data() {
  return {
    page: 1
  }
}

子のprops

props: {
  // 親から渡ってくるページ数（ページリロード時に使う）
  pageNumToChild: {
    type: Object,
    default: null
  }
}

子のwatch

watch: {
  /**
   * ページャーの数字（pageのパラメータの値）を親から渡す用
   */
  pageNumToChild() {
    if (this.pageNumToChild !== null) {
      this.page = this.pageNumToChild
    }
  }
}