我有一個需求 是導航菜單組件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上的鼠標事件始終有效,代碼如下:


哈哈~
