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