vue3界面使用router及使用watch監(jiān)聽(tīng)router的改變
前言:
眾所周知,vue2中使用router非常簡(jiǎn)單,但是vue3中略微有些改變,這里來(lái)羅列下他的改變。
1、路由跳轉(zhuǎn)
vue2
this.$router.push('/')
vue3
import { useRouter } from 'vue-router' const router = useRouter() router.push({ path: "/" });
2、頁(yè)面使用watch監(jiān)聽(tīng)router跳轉(zhuǎn)
vue2:
watch: { $route: { handler: function (route) { const query = route.query; }, immediate: true, }, },
vue3:
import { useRouter } from 'vue-router' const router = useRouter() watch(() => router.currentRoute.value.path, (toPath) => { //要執(zhí)行的方法 const query = router.currentRoute.value.query; },{immediate: true,deep: true})
vue3使用watch監(jiān)聽(tīng)當(dāng)前路由變化
在某個(gè).vue組件中使用watch就可以監(jiān)聽(tīng)當(dāng)前路由變化,從而進(jìn)行邏輯操作
? ?let router = useRouter() ? ?// 監(jiān)聽(tīng)當(dāng)前路由變化 ? ? watch( ? ? ? () => router.currentRoute.value, ? ? ? () => { ? ? ? ??? ?console.log("路由變化了") ? ? ? } ? ? );
到此這篇關(guān)于vue3中界面使用router,以及使用watch來(lái)監(jiān)聽(tīng)router的改變的文章就介紹到這了,更多相關(guān)vue3 watch監(jiān)聽(tīng)router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 一文詳解Vue3的watch是如何實(shí)現(xiàn)監(jiān)聽(tīng)的
- Vue3中watch監(jiān)聽(tīng)的五種情況詳解
- vue3中watch監(jiān)聽(tīng)的四種寫(xiě)法
- Vue3.0監(jiān)聽(tīng)器watch與watchEffect詳解
- Vue3中watch無(wú)法監(jiān)聽(tīng)的解決辦法
- Vue3?Watch踩坑實(shí)戰(zhàn)之watch監(jiān)聽(tīng)無(wú)效
- 詳解Vue3中Watch監(jiān)聽(tīng)事件的使用
- Vue3中watch監(jiān)聽(tīng)使用詳解
- 詳解vue3中watch監(jiān)聽(tīng)的幾種情況
相關(guān)文章
使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析
這篇文章主要介紹了使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11在Vue3中實(shí)現(xiàn)拖拽文件上傳功能的過(guò)程詳解
文件上傳是我們?cè)陂_(kāi)發(fā)Web應(yīng)用時(shí)經(jīng)常遇到的功能之一,為了提升用戶體驗(yàn),我們可以利用HTML5的拖放API來(lái)實(shí)現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-12-12淺談webpack編譯vue項(xiàng)目生成的代碼探索
本篇文章主要介紹了淺談webpack編譯vue項(xiàng)目生成的代碼探索,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09