vue3界面使用router及使用watch監(jiān)聽router的改變
更新時間:2022年11月10日 11:08:38 作者:浩星
vue2中使用router非常簡單,但是vue3中略微有些改變,通過本文講解下他的改變,對vue3?watch監(jiān)聽router相關知識感興趣的朋友一起看看吧
前言:
眾所周知,vue2中使用router非常簡單,但是vue3中略微有些改變,這里來羅列下他的改變。
1、路由跳轉
vue2
this.$router.push('/')
vue3
import { useRouter } from 'vue-router' const router = useRouter() router.push({ path: "/" });
2、頁面使用watch監(jiān)聽router跳轉
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)聽當前路由變化
在某個.vue組件中使用watch就可以監(jiān)聽當前路由變化,從而進行邏輯操作
? ?let router = useRouter() ? ?// 監(jiān)聽當前路由變化 ? ? watch( ? ? ? () => router.currentRoute.value, ? ? ? () => { ? ? ? ??? ?console.log("路由變化了") ? ? ? } ? ? );
到此這篇關于vue3中界面使用router,以及使用watch來監(jiān)聽router的改變的文章就介紹到這了,更多相關vue3 watch監(jiān)聽router內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!