Vue3中axios如何使用路由（useRouter）以及自定義hooks中使用useRouter報錯問題（已踩坑）

随着vue3的更新,vue-router也更新到了4.x

useRouter

相當于vue2的this.$router全局的路由執行個體，是router構造方法的執行個體

useRoute

相當于vue2的this.$route表示目前激活的路由的狀态資訊，包含了目前 URL 解析得到的資訊，還有 URL 比對到的 route路由記錄

但是在一次使用中發現useRoute, useRouter必須寫到setup中,詳見Vue路由強行在函數中使用這兩會報undefined,導緻無法擷取路由資料和路由方法

那麼想要在自定義hooks以及axios中使用路由怎麼辦呢?

// import { useRoute, useRouter } from "vue-router"
import Vrouter from "@/router"
const route = Vrouter.currentRoute.value
const router = Vrouter
           

監測目前路由同理

watch(() => Vrouter.currentRoute.value.query,
    (query) => {
      ListParams.value = Object.assign(params,query)
      res.value = handleParams()
      })
           

注意: 千萬别直接監測整個router對象