vue中使用el-menu和router-view實現菜單強同步

1、問題背景:

父組件:一個框架頁面,裏面有菜單及網站總體框架;

子組件:一個菜單具體頁面

 

在點擊菜單進行路由跳轉的這個過程中是你自定義了一些同步路由變量的邏輯代碼,現在想想如果你略過這個菜單去發生路由跳轉的時候,也就是說如果通過瀏覽器的返回操作,跳轉到了之前的網頁或者前進到下一個網頁,如何做同步呢?該怎麼同步這個菜單與頁面呢?

2、解決思路:

當然,想到的方法可能有1、瀏覽器API裏有沒有檢索到路由變化的變量或事件,2、如果通過子組件去改變父組件的路由變量?

根據這兩個思路,可以想

路由跳轉是在父組件中執行的具體邏輯代碼,

現想讓子組件created初始化事件中訪問一下父組件裏的初始菜單同步的問題。

3、具體邏輯:

這個就是父子組件通信的問題,那麼通信問題有很多種:父子、兄弟。有調用式的父子,有嵌入式(路由)的父子組件。

本問題就是路由跳轉的問題。

4、代碼實現:

父組件中:

<router-view v-on:test_recieve="getUrl"></router-view>

其中v-on綁定的是驅動事件,如果有需要反饋到子組件的信息時,可使用v-bind綁定,子組件中需要註冊props。

子組件中:

this.$emit("test_recieve");

使用這一句調用父組件的綁定事件

 

注意:這個博客只說明了父組件和子組件通信的問題解決方案。並不包含菜單與頁面同步的方案。

同步方案我使用的store內存集合。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章