vue-router提供了兩個方法onBeforeRouteUpdate,onBeforeRouteLeave,分別用兩個方法實現vue3監聽route
1.onBeforeRouteUpdate
onBeforeRouteUpdate(async (to, from) => {
//僅當 id 更改時才獲取用戶,例如僅 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})