多路徑來源頁面導航高亮以及麵包屑導航修改
問題緣由
這個問題比較普遍，原因是業務方面對產品進行多維度的劃分（或者對產品進行歸檔、打標籤、收藏等等），反應在前端方面就是同一個頁面可以有不同的入口（產品目錄結構劃分）
干說不如舉個例子：
-
「活期儲蓄」產品屬於負債類理財產品（導航菜單）
-
關注「活期儲蓄」產品
-
在「我的關注」菜單里也存在「活期儲蓄」產品
從上面的描述中不難發現，「活期儲蓄」產品既可以從「負債類理財產品」菜單進入，也可以從「我的關注」菜單進入。
這就帶來了兩個問題：
-
當進入「活期儲蓄」產品詳情頁面的時候，高亮哪個導航菜單
-
當進入「活期儲蓄」產品詳情頁面的時候，麵包屑導航怎麼顯示
從用戶角度來說自然是我從哪裡點進去的就高亮哪個菜單，麵包屑也真實的反應「來源路徑」
技術背景
項目採用的技術： Vue，Element UI，vue-router
採用的 element ui 的 導航組件和麵包屑組件。
麵包屑是藉助 vue-router 的 matched 方法 匹配到的路由對象數據注入ui組件實現的
解決問題
-
如果可以從後端數據上進行處理當然更好，現實是沒有如果。
-
前端處理，分別針對導高亮和麵包屑處理
思路分析
-
在進入詳情頁面的行為中增加標記（我使用 sessionStorage 標記，標記資訊包括路徑path、title，path用於高亮導航，title用於麵包屑展示）
-
在離開詳情頁的時候移除標記（通過路由守衛實現，目的是標記不會帶來別的副作用）
-
根據標記修正菜單高亮、麵包屑展示
程式碼實現
分析完之後發現寫程式碼就跟玩一樣，沒有什麼技術含量，就不貼程式碼了
有一點需要注意：
在上面思路分析中，當進入詳情頁，刷新頁面，可能會存在時序問題，具體就是麵包屑組件里標記資訊不能及時同步，這裡我採用的是在data上面定義屬性signTitle承接sessionStorage，然後在 computed 裡面以signTitle為源數據得到最新的標記資訊
可以使用全局狀態管理方式替代sessionStorage，狀態持久化就可以了
🌹 持續更文，關注我，你會發現一個踏實努力的寶藏前端😊，讓我們一起學習，共同成長吧。
🎉 喜歡的小夥伴記得點贊關注收藏喲，回看不迷路 😉
🎁 歡迎大家評論交流, 蟹蟹😊
