vue3界面使用router及使用watch監(jiān)聽router的改變
更新時間：2022年11月10日 11:08:38 作者：浩星
vue2中使用router非常簡單，但是vue3中略微有些改變，通過本文講解下他的改變，對vue3?watch監(jiān)聽router相關(guān)知識感興趣的朋友一起看看吧
前言：
眾所周知，vue2中使用router非常簡單，但是vue3中略微有些改變，這里來羅列下他的改變。
1、路由跳轉(zhuǎn)
vue2
this.$router.push('/')vue3
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ path: "/" });2、頁面使用watch監(jiān)聽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)聽當前路由變化
在某個.vue組件中使用watch就可以監(jiān)聽當前路由變化，從而進行邏輯操作
? ?let router = useRouter()
? ?// 監(jiān)聽當前路由變化
? ? watch(
? ? ? () => router.currentRoute.value,
? ? ? () => {
? ? ? ??? ?console.log("路由變化了")
? ? ? }
? ? );到此這篇關(guān)于vue3中界面使用router，以及使用watch來監(jiān)聽router的改變的文章就介紹到這了,更多相關(guān)vue3 watch監(jiān)聽router內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue瀑布流組件實現(xiàn)上拉加載更多，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
應用會對用戶的操作進行反饋，就叫響應式，數(shù)據(jù)變化會實時改變UI，就叫數(shù)據(jù)響應式，修改Vue實例中的數(shù)據(jù)時，視圖會重新渲染，就是Vue的數(shù)據(jù)響應式2022-05-05
vue+el-select?多數(shù)據(jù)分頁搜索組件的實現(xiàn)
本文主要介紹了vue+el-select?多數(shù)據(jù)分頁搜索組件的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12
Mockjs是一個用于生成隨機數(shù)據(jù)和攔截Ajax請求的庫,可以與Vue和Axios結(jié)合使用,提高前端開發(fā)效率,通過在項目中引入Mock.js文件,可以模擬后端API,攔截Ajax請求并返回自定義響應,這種方法適用于在后端尚未開發(fā)完成時的前端開發(fā)測試2024-10-10
使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
本篇文章主要介紹了如何在vue中使用ts的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vant/vue跨域請求解決方案,需要的朋友可以參考下2022-12-12
詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
$emit是Vue實例的一個方法,它用于觸發(fā)自定義事件,本文主要為大家詳細介紹了Vue如何使用$emit進行組件通信,感興趣的小伙伴可以跟隨小編咦學習一下2023-12-12
今天將從 Vue 的入口文件開始，看看聲明了一個 Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯過奧2021-09-09