vue-router提供了兩個(gè)方法onBeforeRouteUpdate嗤无,onBeforeRouteLeave迟隅,分別用兩個(gè)方法實(shí)現(xiàn)vue3監(jiān)聽(tīng)route
1.onBeforeRouteUpdate
onBeforeRouteUpdate(async (to, from) => {
//僅當(dāng) id 更改時(shí)才獲取用戶,例如僅 query 或 hash 值已更改
console.log(to.query)
data.searchInfo = {...data.searchInfo, ...to.query};
getList()
})
onMounted(()=>{
getList()
})
2.onBeforeRouteLeave
onBeforeRouteLeave((to, from) => {
destroyWatch()
})
const destroyWatch = watch(() => route.query, (newValue, oldValue) => {
console.log('destroyWatch')
data.searchInfo = {...data.searchInfo, ...newValue};
data.timeArr = [Number(data.searchInfo.start_time)*1000,Number(data.searchInfo.end_time)*1000]
getList()
}, {immediate: true, deep: true})