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)

this.$router.push('/')

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)上拉加載更多
這篇文章主要為大家詳細介紹了vue瀑布流組件實現(xiàn)上拉加載更多，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
Vue深入講解數(shù)據(jù)響應(yīng)式原理
應(yīng)用會對用戶的操作進行反饋，就叫響應(yīng)式，數(shù)據(jù)變化會實時改變UI，就叫數(shù)據(jù)響應(yīng)式，修改Vue實例中的數(shù)據(jù)時，視圖會重新渲染，就是Vue的數(shù)據(jù)響應(yīng)式
2022-05-05
vue+el-select?多數(shù)據(jù)分頁搜索組件的實現(xiàn)
本文主要介紹了vue+el-select?多數(shù)據(jù)分頁搜索組件的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-12-12
使用mockjs如何生成隨機數(shù)據(jù)
Mockjs是一個用于生成隨機數(shù)據(jù)和攔截Ajax請求的庫,可以與Vue和Axios結(jié)合使用,提高前端開發(fā)效率,通過在項目中引入Mock.js文件,可以模擬后端API,攔截Ajax請求并返回自定義響應(yīng),這種方法適用于在后端尚未開發(fā)完成時的前端開發(fā)測試
2024-10-10
使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-08-08
如何在vue中使用ts的示例代碼
本篇文章主要介紹了如何在vue中使用ts的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
vant/vue跨域請求解決方案
這篇文章主要介紹了vant/vue跨域請求解決方案,需要的朋友可以參考下
2022-12-12
詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
詳解Vue如何使用$emit進行組件通信
$emit是Vue實例的一個方法,它用于觸發(fā)自定義事件,本文主要為大家詳細介紹了Vue如何使用$emit進行組件通信,感興趣的小伙伴可以跟隨小編咦學習一下
2023-12-12
Vue3 編譯流程-源碼解析
今天將從 Vue 的入口文件開始，看看聲明了一個 Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯過奧
2021-09-09