Vue.js - 監聽 URL Query 變化

需求

當使用者修改網址參數（例 https://eudora.cc/post/123?a=1&b=2 使用者手動修改為 https://....?a=2&b=3 ）強制頁面重整。

適用:

• 版本: Vue3 + vue-router
• 知道 setup、computed、watch、vue-router

當網址參數（query）變更時並不會重整頁面。透過 watch router 的方式監聽 router query 變化來觸發重整頁面或其他自定義動作。

---

例

import { computed, watch } from 'vue'
import { useRoute } from "vue-router";

export default {
  ...
  setup() {
    const route = useRoute()
    let routeQuery = computed(() => route.query)
    watch(routeQuery, (newVal, oldVal) => {
      if (Object.entries(oldVal).length === 0 || oldVal === newVal) return
      location.reload()
    })
  }
  ...
}

---

Ref

• Vue Router
• DanDan