vue3在自定義hooks中使用useRouter報錯的解決方案
更新時間：2022年08月01日 15:58:01 作者：瘋喵喵
這篇文章主要介紹了vue3在自定義hooks中使用useRouter報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
自定義hooks中使用useRouter報錯
隨著vue3的更新,vue-router也更新到了4.x
useRouter
相當(dāng)于vue2的this.$router全局的路由實例，是router構(gòu)造方法的實例
useRoute
相當(dāng)于vue2的this.$route表示當(dāng)前激活的路由的狀態(tài)信息，包含了當(dāng)前 URL 解析得到的信息，還有 URL 匹配到的 route路由記錄
但是在一次使用中發(fā)現(xiàn)
import { useRoute, useRouter } from "vue-router"useRoute, useRouter必須寫到setup中,詳見vue-next-router.強行在函數(shù)中使用這兩會報undefined,導(dǎo)致無法獲取路由數(shù)據(jù)和路由方法
那么想要在自定義hooks中使用路由怎么辦呢？
經(jīng)過摸索,可以直接從路由引入路由對象
// import { useRoute, useRouter } from "vue-router"
import Vrouter from "@/router"
?
// const router = useRouter();
// const route = useRoute();
?
const route = Vrouter.currentRoute.value
const router = Vrouter監(jiān)測當(dāng)前路由同理
eg：
watch(() => Vrouter.currentRoute.value.query,
? ? (query) => {
? ? ? ListParams.value = Object.assign(params,query)
? ? ? res.value = handleParams()
? ? })注意：千萬別直接監(jiān)測整個router對象
使用Vue.use()報錯“Cannot read property ‘use‘ of undefined”
問題：在學(xué)習(xí)Vue 3的時候，發(fā)現(xiàn)以下代碼報錯
錯誤信息為：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'并不能導(dǎo)出”vue“這個包
Vue 3使用createApp(App) 返回應(yīng)用實例
正解
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue表單數(shù)據(jù)交互提交演示教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))
本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue中實現(xiàn)3D標(biāo)簽云的詳細(xì)代碼
本文通過實例代碼給大家介紹vue實現(xiàn)3D標(biāo)簽云的方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-07-07
關(guān)于this.$refs獲取不到dom的可能原因及解決方法
這篇文章主要介紹了關(guān)于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
學(xué)習(xí)過?vue2?的寶子們肯定知道，組件傳值是?vue?項目開發(fā)過程中必不可少的功能場景，在?vue2?里面有很多傳值的方式。今天就來和大家講講Vue3的組件傳值方式，需要的可以參考一下2022-07-07
大家都經(jīng)常使用美團app買電影票，很多朋友不知道她的功能是怎么實現(xiàn)的，作為我程序員一枚對它的算法很好奇，今天小編就把基于Vue實現(xiàn)美團app的影院推薦選座功能分享到腳本之家平臺，感興趣的朋友一起看看吧2018-08-08
下面小編就為大家分享一篇Vue之Vue.set動態(tài)新增對象屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點是一個元素還是一個文本，隨著思路的展開我們就來實現(xiàn)這個功能，需要的朋友可以參考下2023-10-10
本篇文章主要介紹了Vue2.x的虛擬DOM diff原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
最近小編在學(xué)習(xí)vue.js ,發(fā)現(xiàn)里面有好多好玩的東東，今天小編給大家分享Vue.js2.0中的變化，小編會在日后給大家持續(xù)更新的，感興趣的朋友參考下吧2017-10-10