前段時間在項目開發(fā)中请祖，由于項目中有兩級菜單且在第二級菜單頁面中操作的過程中會進入第三級的操作頁面订歪。為了友好的對用戶指引，讓用戶有效的理解自己所處的頁面層級损拢。加入了面包屑功能。對面包屑數(shù)據(jù)存儲方案做了分析撒犀。
頁面結(jié)構(gòu)
在這里引用ant.design的圖片福压。頁面結(jié)構(gòu)大概如此或舞。有一級導航、二級導航映凳。在二級導航中可以通過操作進入不在導航中的頁面胆筒。
image.png
面包屑導航
面包屑導航是在用戶界面中的一種導航輔助。它是用戶用來在一個在程序或文件中確定和轉(zhuǎn)移他們位置仆救。
天貓商城面包屑
image.png
面包屑導航數(shù)據(jù)特性
- 屬于全局數(shù)據(jù)，生命周期開始于用戶進入系統(tǒng)摧莽，結(jié)束于用戶退出系統(tǒng)。
- 刷新當前頁面后面包屑數(shù)據(jù)不能丟失顿痪。
- 如果系統(tǒng)允許打開多個標簽頁，它不在多個標簽頁中共享蚁袭。各自標簽頁中維護各自面包屑數(shù)據(jù)，不能互相影響揩悄。
第一條特性決定了，它必須作為全局數(shù)據(jù)來存儲虏束。全局的數(shù)據(jù)存儲方式有很多，單頁面常見的有全局變量（window）镇匀、狀態(tài)管理模器（vuex,redux）照藻、sessionStorage汗侵、locationStorage幸缕。
第二條特性決定了全局變量晰韵、狀態(tài)管理模器不適合存儲這類數(shù)據(jù)，因為它們刷新后就會消失雪猪，除非重新添加栏尚。
第三條特性決定了只恨，不合適去使用localStrage去存儲它，因為在多個標簽頁下localStorage是共享的官觅。雖然也有辦法可以在localStrage區(qū)分標簽頁（通過設置標簽頁id來確定標簽頁）纵菌，但成本過高休涤。
解決方案
根據(jù)以上的分析，總結(jié)了兩種存儲方案。
- 存儲在sessionStorage
- 存儲在路由數(shù)據(jù)之中
存儲在sessionStorage
因為sessionStorage并不違背面包屑導航數(shù)據(jù)存儲的三個特性因此可以將其存儲在sessionStorage序苏。
操作流程
進入應用 => 創(chuàng)建面包屑
切換頁面 => 修改面包屑
退出應用 => 卸載面包屑
存儲在路由數(shù)據(jù)中
由于面包屑的改變發(fā)生在頁面（視圖）切換的時刻。而在存在路由的系統(tǒng)中杠览，頁面（視圖）都是與路由一一對應。因此路由改變就意味著面包屑的改變踱阿。可以將路由數(shù)據(jù)和面包屑數(shù)據(jù)做關聯(lián)软舌。路由改變時裝載其對應的面包屑數(shù)據(jù)才漆。
前提條件：
- 系統(tǒng)必須存在路由系統(tǒng)佛点，例如vue-router,react-router醇滥。
- 一個路由不能由多個上級路由操作進入超营。這樣就無法確認準確的路徑。例如：修改學生信息頁面可以由學生信息管理頁面和班級成員管理兩個頁面操作進入演闭。但是進入后路由的匹配路徑確實相同的，此時就無法根據(jù)路由來確認面包屑導航米碰。
操作流程
路由變化 => 修改面包屑
