路由切換之前jquery綁定的監聽事件可以觸發,頁面切換后監聽事件就失效了,要刷新當前頁面才能再次監聽 兩種解決辦法


我有一個需求 是導航菜單組件nav以插槽的方式分別插入到兩個組件home.vue、resume.vue中

在導航菜單上我用jquery添加了鼠標進入、離開事件(事件寫在導航菜單組件上對應的js上),

我用路由切換的方式點擊導航菜單上的按鈕 ,頁面可以在兩個不同的組件 home或resume中切換

問題是:在頁面切換之前鼠標移入事件可以觸發 ,切換之后就失效了 ,然后刷新頁面才能再次生效,

原因可能是:
1、在導航組件執行this.$router.push()方法,跳轉到同一個導航組件,頁面不刷新。
因為路由主體沒變,變的只是傳遞的參數id
2、

解決辦法 : 用watch監聽路由的變化 ,當路由地址發生變化時 強制刷新當前頁面, 如圖:

今天我突然又想到了第二種解決辦法:

我先將nav.js中的jQuery代碼封裝成一個函數暴露出去,然后將nav組件的鼠標事件的代碼nav.js 引入到nav中
在組件中創建mounted鈎子,將nav.js暴露的函數接口在鈎子函數內調用。
結果時:在我切換home、和resume組件時 nav上的鼠標事件始終有效,代碼如下:

哈哈~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM