vue3監(jiān)聽路由的變化代碼示例
更新時間：2023年09月10日 16:15:08 作者：回憶哆啦沒有A夢
在vue項目中假使我們在同一個路由下,只是改變路由后面的參數(shù)值,期望達到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關于vue3監(jiān)聽路由的變化的相關資料,需要的朋友可以參考下
可以使用監(jiān)聽 router.currentRoute.value 的值,，來監(jiān)聽路由的變化。
使用：
引入：
import { useRouter} from 'vue-router'setup使用 :
const router = useRouter()
// 監(jiān)聽當前路由
watch(
() => router.currentRoute.value,
(newValue: any) => {
console.log('newValue',newValue)
},
{ immediate: true }
)控制臺輸出的值 newValue ：
如果我們只需要監(jiān)聽當前路由 name 的變化，就可以這么監(jiān)聽 router.currentRoute.value.name
const router = useRouter()
// 監(jiān)聽當前路由的name變化
watch(
() => router.currentRoute.value.name,
(newRouterName: any) => {
console.log('newRouterName',newRouterName)
},
{ immediate: true }
)Tips:
immediate:true //true 就表示會立即執(zhí)行。（watch默認綁定，頁面首次加載時，是不會執(zhí)行的。只有值發(fā)生改變才會執(zhí)行。所以不加 immediate:true //true 的話，首頁不會觸發(fā)要執(zhí)行的方法）
deep:true //true 表示深度監(jiān)聽，這時候就能監(jiān)測到newValue值變化
總結(jié)
到此這篇關于vue3監(jiān)聽路由的變化的文章就介紹到這了,更多相關vue3監(jiān)聽路由變化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了計算屬性和偵聽器，文章以介紹計算屬性、偵聽器的相關資料展開詳細內(nèi)容,需要的朋友可以參考一下，希望對你有所幫助2021-11-11
在現(xiàn)代Web應用中,集成文檔編輯功能變得越來越常見,特別是在協(xié)作環(huán)境中,能夠直接在Web應用內(nèi)編輯Word文檔可以極大地提高工作效率,本文將詳細介紹如何在Vue.js項目中集成Word在線編輯功能,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細介紹了Vue如何將頁面導出成PDF文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
在Vue2項目中安裝vue-i18n時,由于默認安裝的是Vue3版本,導致報錯,因此需要安裝適合Vue2的版本,如8.x,以解決兼容性問題2026-04-04
這篇文章主要介紹了vue項目使用可選鏈操作符編譯報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了ToB項目如何沉淀業(yè)務公共組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
前端Vue通過Minio返回的URL下載文件實現(xiàn)方法
Minio是一個靈活、高性能、開源的對象存儲解決方案,適用于各種存儲需求,并可以與云計算、容器化、大數(shù)據(jù)和應用程序集成,這篇文章主要給大家介紹了關于前端Vue通過Minio返回的URL下載文件實現(xiàn)的相關資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue百度地圖修改折線顏色,添加icon和文字標注方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue-cli3 中跨域解決方案，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了在vue中封裝方法以及多處引用該方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08