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

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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 使用vue重構資訊頁面的實例代碼解析

    使用vue重構資訊頁面的實例代碼解析

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

    vue中使用svg畫路徑圖的詳細介紹

    這篇文章主要介紹了vue中使用svg畫路徑圖的相關知識,在這大家需要注意svg中不能使用html標簽,例如div,img等,因此在svg中一般使用image標簽放置圖片,text圖片放置文本內容,詳細代碼跟隨小編一起看看吧
    2022-04-04
  • vue中如何實現(xiàn)變量和字符串拼接

    vue中如何實現(xiàn)變量和字符串拼接

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

    一文探索Vue中組件和插件使用細節(jié)與差異

    Vue組件和插件是Vue生態(tài)系統(tǒng)中的兩種重要概念,它們分別服務于不同的目的,但都極大地豐富了Vue的功能性和可擴展性,下面我們就來看看二者的用法以及區(qū)別吧
    2024-03-03
  • Vue2.0 實現(xiàn)單選互斥的方法

    Vue2.0 實現(xiàn)單選互斥的方法

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

    在Vue3中實現(xiàn)拖拽文件上傳功能的過程詳解

    文件上傳是我們在開發(fā)Web應用時經(jīng)常遇到的功能之一,為了提升用戶體驗,我們可以利用HTML5的拖放API來實現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實現(xiàn)這一功能,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下
    2023-12-12
  • 淺談webpack編譯vue項目生成的代碼探索

    淺談webpack編譯vue項目生成的代碼探索

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

    vue中i18n的安裝與幾種使用方式詳解

    在一些網(wǎng)站經(jīng)常可以看到切換語言包,將網(wǎng)站轉化成多種語言版本的情況,下面這篇文章主要給大家介紹了關于vue中i18n的安裝與幾種使用方式的相關資料,需要的朋友可以參考下
    2022-09-09
  • vue中計算屬性和方法的區(qū)別及說明

    vue中計算屬性和方法的區(qū)別及說明

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

    react router零基礎使用教程

    React-Router 路由庫,是官方維護的路由庫,事實上也是唯一可選的路由庫。它通過管理 URL,實現(xiàn)組件的切換和狀態(tài)的變化,開發(fā)復雜的應用幾乎肯定會用到
    2022-09-09

最新評論