天天看點

重讀vue電商網站35之在sessionStorage儲存左側菜單欄的激活狀态

為了讓我們點選二級菜單時,會有一個激活效果,而且是保持狀态,我們需要将利用 element-ui 菜單欄相關 default-active 屬性,來讓菜單保持激活。

重讀vue電商網站35之在sessionStorage儲存左側菜單欄的激活狀态

由于每個二級菜單都有一個路由連結,不妨将路由路徑 path 存儲在 sessionStorage 中,具體做法就是給二級菜單綁定一個事件:

重讀vue電商網站35之在sessionStorage儲存左側菜單欄的激活狀态

每次觸發點選事件,我們需要更新目前路由路徑,才能讓點選的那個按鈕高亮。

重讀vue電商網站35之在sessionStorage儲存左側菜單欄的激活狀态

然後在我們建立這個元件時,就擷取目前的激活狀态的路徑即可。

重讀vue電商網站35之在sessionStorage儲存左側菜單欄的激活狀态

檢視 sessionStorage ,可以看到我們存儲的路由路徑。

繼續閱讀