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