天天看点

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

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

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

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

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

每次触发点击事件,我们需要更新当前路由路径,才能让点击的那个按钮高亮。

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

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

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

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

继续阅读