重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态

Ad大成

关注

阅读 85

2022-06-11

为了让我们点击二级菜单时,会有一个激活效果,而且是保持状态,我们需要将利用 element-ui 菜单栏相关 default-active 属性,来让菜单保持激活。

重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态_二级菜单

由于每个二级菜单都有一个路由链接,不妨将路由路径 path 存储在 sessionStorage 中,具体做法就是给二级菜单绑定一个事件:

重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态_高亮_02
每次触发点击事件,我们需要更新当前路由路径,才能让点击的那个按钮高亮。

 重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态_菜单栏_03

 

然后在我们创建这个组件时,就获取当前的激活状态的路径即可。

重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态_高亮_04

 

查看 sessionStorage ,可以看到我们存储的路由路径。

重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态_菜单栏_05

 


精彩评论(0)

0 0 举报