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

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

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

图片.png

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

图片.png

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

图片.png

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

   图片.png

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

图片.png


相关文章
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
52 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
35 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的自助甜品网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的自助甜品网站附带文章源码部署视频讲解等
18 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的浙江艾艺塑业设计公司网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的浙江艾艺塑业设计公司网站附带文章源码部署视频讲解等
15 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的国风彩妆网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的国风彩妆网站附带文章源码部署视频讲解等
16 0
|
数据库
基于springboot+mybatisplus+vue的课程学分管理系统
基于springboot+mybatisplus+vue的课程学分管理系统
129 0
基于springboot+mybatisplus+vue的课程学分管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
130 0
基于Springboot+MybatisPlus+Vue的在线课程管理系统
|
JavaScript 前端开发 Java
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
214 0
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
|
前端开发 Java 关系型数据库
前后端分离Springboot+Vue实现课程社区管理系统
本项目主要实现一个基于课程选课的社区交流系统,主要的业务背景为每个老师可以自己开设相应的选修课,并指定可以选修的人数,学生登陆系统后可以进行选课,并可以在线针对自己的选课进行在线讨论,点赞等互动行为。管理员则主要是对基本信息的相关管理,比如用户和角色、权限管理等,本系统有着完备的权限管理控制系统,可以根据需要自定角色并分配相应的权限。系统采用前后端分离开发的方式来实现。
174 0
前后端分离Springboot+Vue实现课程社区管理系统
|
JavaScript
Vue课程52命令v-if和v-show的区别
Vue课程52命令v-if和v-show的区别
125 0
Vue课程52命令v-if和v-show的区别