美文网首页
vue3监听route(解决vue3切换页面,会调用上个页面的w

vue3监听route(解决vue3切换页面,会调用上个页面的w

作者: 生于乱世 | 来源:发表于2022-07-23 10:46 被阅读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})
    

    相关文章

      网友评论

          本文标题:vue3监听route(解决vue3切换页面,会调用上个页面的w

          本文链接:https://www.haomeiwen.com/subject/rxqbirtx.html