vue多頁(yè)面跳轉(zhuǎn)事件多次注冊(cè)

多頁(yè)面跳轉(zhuǎn) A =>B =>A 即使都使用$router.place,回到A時(shí),A里面用addEventListner注冊(cè)的事件沒(méi)移除,多次注冊(cè)事件。

  • 方法 一

    /* 組件銷毀前移除事件 */
    
    berforeDestroy(){
        removeEventListner(event, eventFun) 
    }
    // event : {string} 事件名(必須)
    // eventFunName: {function} 與這個(gè)事件綁定的函數(shù)(必須,addEventListner可以同時(shí)事件注冊(cè)多個(gè)相應(yīng)函數(shù))
    
    /* 這就需要A頁(yè)面中的每一個(gè)組件只要用到addEventListner注冊(cè)事件,都需要這樣寫(xiě)去主動(dòng)銷毀事件。*/
    /* removeEventListner不支持匿名函數(shù): */
    ele.addEventListner('click',()=>{console.log('匿名函數(shù)')}) // 這種就沒(méi)辦法通過(guò)removeEventListner來(lái)移除,因?yàn)榈诙€(gè)參數(shù)必須,匿名函數(shù)沒(méi)名字。
    
  • 方法 二

    /* 用on的方式注冊(cè)事件 */
    
    ele.onclick = function(){}
    
    // on的方式注冊(cè)事件是不可以重復(fù)的,即由B回到A時(shí),雖然上次的事件沒(méi)移除,但這次再注冊(cè)就把上次的覆蓋了。
    
  • 方法 三

    // 妥協(xié)方案,打開(kāi)新的窗口。(但有些時(shí)候需求就是要打開(kāi)新的窗口)
    // 即兩個(gè)頁(yè)面互不相干
    openNewWindow(){
       let routeUrl = this.$router.resolve({
         path: "/pageB",
         query: {id:96} //還可以帶參數(shù)過(guò)去
       });
       window.open(routeUrl.href, '_blank');
    }
    

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容