vue3监听route(解决vue3切换页面,会调用上个页面的w
2022-07-23 本文已影响0人
生于乱世
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})