欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)

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

相關(guān)文章

  • 使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析

    使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析

    這篇文章主要介紹了使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-11-11
  • vue中使用svg畫(huà)路徑圖的詳細(xì)介紹

    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)變量和字符串拼接

    這篇文章主要介紹了vue中如何實(shí)現(xiàn)變量和字符串拼接,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • 一文探索Vue中組件和插件使用細(xì)節(jié)與差異

    一文探索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)單選互斥的方法

    本篇文章主要介紹了Vue2.0 實(shí)現(xiàn)單選互斥的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-04-04
  • 在Vue3中實(shí)現(xiàn)拖拽文件上傳功能的過(guò)程詳解

    在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)目生成的代碼探索

    本篇文章主要介紹了淺談webpack編譯vue項(xiàng)目生成的代碼探索,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12
  • vue中i18n的安裝與幾種使用方式詳解

    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ō)明

    這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • react router零基礎(chǔ)使用教程

    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

最新評(píng)論