vue3界面使用router及使用watch監(jiān)聽(tīng)router的改變

更新時(shí)間：2022年11月10日 11:08:38 作者：浩星

vue2中使用router非常簡(jiǎn)單，但是vue3中略微有些改變，通過(guò)本文講解下他的改變，對(duì)vue3?watch監(jiān)聽(tīng)router相關(guān)知識(shí)感興趣的朋友一起看看吧

前言：

眾所周知，vue2中使用router非常簡(jiǎn)單，但是vue3中略微有些改變，這里來(lái)羅列下他的改變。

1、路由跳轉(zhuǎn)

this.$router.push('/')

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析
這篇文章主要介紹了使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
vue中使用svg畫(huà)路徑圖的詳細(xì)介紹
這篇文章主要介紹了vue中使用svg畫(huà)路徑圖的相關(guān)知識(shí)，在這大家需要注意svg中不能使用html標(biāo)簽，例如div，img等，因此在svg中一般使用image標(biāo)簽放置圖片，text圖片放置文本內(nèi)容,詳細(xì)代碼跟隨小編一起看看吧
2022-04-04
vue中如何實(shí)現(xiàn)變量和字符串拼接
這篇文章主要介紹了vue中如何實(shí)現(xiàn)變量和字符串拼接，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
一文探索Vue中組件和插件使用細(xì)節(jié)與差異
Vue組件和插件是Vue生態(tài)系統(tǒng)中的兩種重要概念,它們分別服務(wù)于不同的目的,但都極大地豐富了Vue的功能性和可擴(kuò)展性,下面我們就來(lái)看看二者的用法以及區(qū)別吧
2024-03-03
Vue2.0 實(shí)現(xiàn)單選互斥的方法
本篇文章主要介紹了Vue2.0 實(shí)現(xiàn)單選互斥的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
在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-12
vue中i18n的安裝與幾種使用方式詳解
在一些網(wǎng)站經(jīng)?？梢钥吹角袚Q語(yǔ)言包,將網(wǎng)站轉(zhuǎn)化成多種語(yǔ)言版本的情況,下面這篇文章主要給大家介紹了關(guān)于vue中i18n的安裝與幾種使用方式的相關(guān)資料,需要的朋友可以參考下
2022-09-09
vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
react router零基礎(chǔ)使用教程
React-Router 路由庫(kù)，是官方維護(hù)的路由庫(kù)，事實(shí)上也是唯一可選的路由庫(kù)。它通過(guò)管理 URL，實(shí)現(xiàn)組件的切換和狀態(tài)的變化，開(kāi)發(fā)復(fù)雜的應(yīng)用幾乎肯定會(huì)用到
2022-09-09