vue3監(jiān)聽路由的變化代碼示例
更新時(shí)間：2023年09月10日 16:15:08 作者：回憶哆啦沒有A夢(mèng)
在vue項(xiàng)目中假使我們?cè)谕粋€(gè)路由下,只是改變路由后面的參數(shù)值,期望達(dá)到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽路由的變化的相關(guān)資料,需要的朋友可以參考下
可以使用監(jiān)聽 router.currentRoute.value 的值,，來(lái)監(jiān)聽路由的變化。
使用：
引入：
import { useRouter} from 'vue-router'setup使用 :
const router = useRouter()
// 監(jiān)聽當(dāng)前路由
watch(
() => router.currentRoute.value,
(newValue: any) => {
console.log('newValue',newValue)
},
{ immediate: true }
)控制臺(tái)輸出的值 newValue ：
如果我們只需要監(jiān)聽當(dāng)前路由 name 的變化，就可以這么監(jiān)聽 router.currentRoute.value.name
const router = useRouter()
// 監(jiān)聽當(dāng)前路由的name變化
watch(
() => router.currentRoute.value.name,
(newRouterName: any) => {
console.log('newRouterName',newRouterName)
},
{ immediate: true }
)Tips:
immediate:true //true 就表示會(huì)立即執(zhí)行。（watch默認(rèn)綁定，頁(yè)面首次加載時(shí)，是不會(huì)執(zhí)行的。只有值發(fā)生改變才會(huì)執(zhí)行。所以不加 immediate:true //true 的話，首頁(yè)不會(huì)觸發(fā)要執(zhí)行的方法）
deep:true //true 表示深度監(jiān)聽，這時(shí)候就能監(jiān)測(cè)到newValue值變化
總結(jié)
到此這篇關(guān)于vue3監(jiān)聽路由的變化的文章就介紹到這了,更多相關(guān)vue3監(jiān)聽路由變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue prop傳值類型檢驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了如何修改vue-treeSelect的高度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue中$bus的用法及$on、$off的使用說(shuō)明
這篇文章主要介紹了Vue中$bus的用法及$on、$off的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決
這篇文章主要介紹了vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇vue實(shí)現(xiàn)重置表單信息為空的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue3動(dòng)態(tài)路由刷新后空白或者404問題的解決
在vue項(xiàng)目中采用動(dòng)態(tài)添加路由的方式,第一次進(jìn)入頁(yè)面會(huì)正常顯示,但是點(diǎn)擊刷新頁(yè)面后會(huì)導(dǎo)致頁(yè)面空白,所以下面這篇文章主要給大家介紹了關(guān)于vue3動(dòng)態(tài)路由刷新后空白或者404問題的解決方法,需要的朋友可以參考下2022-07-07
key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊Nodes對(duì)比時(shí)辨識(shí)VNodes。這篇文章主要給大家介紹Vue中key的作用，感興趣的朋友跟隨小編一起看看吧2020-06-06
vue如何根據(jù)不同的環(huán)境使用不同的接口地址
這篇文章主要介紹了vue如何根據(jù)不同的環(huán)境使用不同的接口地址問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本文主要介紹了深入理解vue3中的reactive()，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02