前段時(shí)間在項(xiàng)目開(kāi)發(fā)中，由于項(xiàng)目中有兩級(jí)菜單且在第二級(jí)菜單頁(yè)面中操作的過(guò)程中會(huì)進(jìn)入第三級(jí)的操作頁(yè)面。為了友好的對(duì)用戶指引，讓用戶有效的理解自己所處的頁(yè)面層級(jí)。加入了面包屑功能。對(duì)面包屑數(shù)據(jù)存儲(chǔ)方案做了分析。
頁(yè)面結(jié)構(gòu)
在這里引用ant.design的圖片。頁(yè)面結(jié)構(gòu)大概如此。有一級(jí)導(dǎo)航、二級(jí)導(dǎo)航。在二級(jí)導(dǎo)航中可以通過(guò)操作進(jìn)入不在導(dǎo)航中的頁(yè)面。
image.png
面包屑導(dǎo)航
面包屑導(dǎo)航是在用戶界面中的一種導(dǎo)航輔助。它是用戶用來(lái)在一個(gè)在程序或文件中確定和轉(zhuǎn)移他們位置。
天貓商城面包屑
image.png
面包屑導(dǎo)航數(shù)據(jù)特性
- 屬于全局?jǐn)?shù)據(jù)，生命周期開(kāi)始于用戶進(jìn)入系統(tǒng)，結(jié)束于用戶退出系統(tǒng)。
- 刷新當(dāng)前頁(yè)面后面包屑數(shù)據(jù)不能丟失。
- 如果系統(tǒng)允許打開(kāi)多個(gè)標(biāo)簽頁(yè)，它不在多個(gè)標(biāo)簽頁(yè)中共享。各自標(biāo)簽頁(yè)中維護(hù)各自面包屑數(shù)據(jù)，不能互相影響。
第一條特性決定了，它必須作為全局?jǐn)?shù)據(jù)來(lái)存儲(chǔ)。全局的數(shù)據(jù)存儲(chǔ)方式有很多，單頁(yè)面常見(jiàn)的有全局變量（window）、狀態(tài)管理模器（vuex,redux）、sessionStorage、locationStorage。
第二條特性決定了全局變量、狀態(tài)管理模器不適合存儲(chǔ)這類數(shù)據(jù)，因?yàn)樗鼈兯⑿潞缶蜁?huì)消失，除非重新添加。
第三條特性決定了，不合適去使用localStrage去存儲(chǔ)它，因?yàn)樵诙鄠€(gè)標(biāo)簽頁(yè)下localStorage是共享的。雖然也有辦法可以在localStrage區(qū)分標(biāo)簽頁(yè)（通過(guò)設(shè)置標(biāo)簽頁(yè)id來(lái)確定標(biāo)簽頁(yè)），但成本過(guò)高。
解決方案
根據(jù)以上的分析，總結(jié)了兩種存儲(chǔ)方案。
- 存儲(chǔ)在sessionStorage
- 存儲(chǔ)在路由數(shù)據(jù)之中
存儲(chǔ)在sessionStorage
因?yàn)閟essionStorage并不違背面包屑導(dǎo)航數(shù)據(jù)存儲(chǔ)的三個(gè)特性因此可以將其存儲(chǔ)在sessionStorage。
操作流程
進(jìn)入應(yīng)用 => 創(chuàng)建面包屑
切換頁(yè)面 => 修改面包屑
退出應(yīng)用 => 卸載面包屑
存儲(chǔ)在路由數(shù)據(jù)中
由于面包屑的改變發(fā)生在頁(yè)面（視圖）切換的時(shí)刻。而在存在路由的系統(tǒng)中，頁(yè)面（視圖）都是與路由一一對(duì)應(yīng)。因此路由改變就意味著面包屑的改變?？梢詫⒙酚蓴?shù)據(jù)和面包屑數(shù)據(jù)做關(guān)聯(lián)。路由改變時(shí)裝載其對(duì)應(yīng)的面包屑數(shù)據(jù)。
前提條件：
- 系統(tǒng)必須存在路由系統(tǒng)，例如vue-router,react-router。
- 一個(gè)路由不能由多個(gè)上級(jí)路由操作進(jìn)入。這樣就無(wú)法確認(rèn)準(zhǔn)確的路徑。例如：修改學(xué)生信息頁(yè)面可以由學(xué)生信息管理頁(yè)面和班級(jí)成員管理兩個(gè)頁(yè)面操作進(jìn)入。但是進(jìn)入后路由的匹配路徑確實(shí)相同的，此時(shí)就無(wú)法根據(jù)路由來(lái)確認(rèn)面包屑導(dǎo)航。
操作流程
路由變化 => 修改面包屑
