Vue Nuxt 3 同步網址列查詢參數

本篇介紹Vue Nuxt 3如何將查詢參數同步到網址列。

將查詢條件同步到網址，可以讓頁面狀態在重新整理或分享連結時保持一致。

事前要求

參考「Vue Nuxt 3 useFetch 輸入查詢參數」。

修改pages/home/export/index.vue

引入useRoute和useRouter，分別取得route物件和router物件。

使用route.query.status取得url中的查詢字串status的值，作為ref物件status和queryString的初始值。

使用router.push將使用者在頁面搜尋欄位輸入的查詢參數更新到網址列的url，加上|| undefined可避免空字串時出現?status=。

pages/home/export/index.vue

<template>
  <div>
    <h1>出口業務</h1>

    <label>
      訂單狀態：
      <input v-model="status" placeholder="pending/done">
    </label>

    <button @click="search">查詢</button>

    <!--省略-->

  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const status = ref(route.query.status || '')
const queryStatus = ref(route.query.status || '')

// 省略

function search() {
  queryStatus.value = status.value

  router.push({
    query: {
      status: status.value || undefined,
    },
  })

  refresh()
}
</script>

<!--省略-->

github

在搜尋欄輸入查詢參數"done"然後按[查詢]，可以看到網址列的url變成http://localhost:3000/home/export?status=done；
或直接在網址列輸入http://localhost:3000/home/export?status=pending，可看到相應的搜尋欄內容與查詢結果。

接著可以新增一個下拉選單作為另一個查詢參數。