vue3在自定義hooks中使用useRouter報錯的解決方案

Posted on by

自定義hooks中使用useRouter報錯

隨著vue3的更新,vue-router也更新到瞭4.x

useRouter

相當於vue2的this.$router全局的路由實例，是router構造方法的實例

useRoute

相當於vue2的this.$route表示當前激活的路由的狀態信息，包含瞭當前 URL 解析得到的信息，還有 URL 匹配到的 route路由記錄

但是在一次使用中發現

import { useRoute, useRouter } from "vue-router"

useRoute, useRouter必須寫到setup中,詳見vue-next-router.強行在函數中使用這兩會報undefined,導致無法獲取路由數據和路由方法

那麼想要在自定義hooks中使用路由怎麼辦呢？

經過摸索,可以直接從路由引入路由對象

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

監測當前路由同理

eg：

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

註意：千萬別直接監測整個router對象 

使用Vue.use()報錯“Cannot read property ‘use‘ of undefined”

問題：在學習Vue 3的時候，發現以下代碼報錯

錯誤信息為：Cannot read property 'use' of undefined

import Vue from 'vue'
import router from './router'
Vue.use(router)

原因

Vue.use()是Vue 2安裝插件的方式

在Vue 3中，import Vue from 'vue'並不能導出”vue“這個包

Vue 3使用createApp(App) 返回應用實例

正解

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：