前端学习(2715):重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态

 

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

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


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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414770.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Struts2的通配符配置方式

Struts2的Action类很有意思,你可以使用3种方式来实现具体的Action类: 让你的Action类继承自ActionSupport类(项目中最常用这种方式,因为ActionSupport类中定义了很多帮助方法)让你的Action类实现Action接口使用POJO的…

spring拦截器-过滤器的区别

1. 理解 拦截器 :是在面向切面编程的时候,在你的 service 或者一个方法前调用一个方法,或者在方法后调用一个方法;比如动态代理就是拦截器的简单实现,在你调用方法前打印出字符串(或者做其它业务逻辑的操作…

前端学习(2716):重读vue电商网站36之slot插槽使用

项目需求:由于用户列表状态后台返回的是 true/false,无法进行渲染,而我们需要的是有一个Switch开关来控制我们的状态。添加一个template 模板后,此时就可以用 slot-scope 作用域插槽来获取我们数据列表中的每一行数据,…

前端学习(2717):重读vue电商网站37之通过switch开关更改用户状态

首先,在 switch 开关添加一个 change 事件,并且通过作用域插槽的形式,将该行数据作为参数传入,目的是为了后续的修改。 在函数内我们将传递过来的参数作为我们请求的参数,通过 put 方式修改我们的后台数据 。

边框回归(Bounding Box Regression)详解

原文地址:http://blog.csdn.net/zijin0802034/article/details/77685438 Bounding-Box regression 最近一直看检测有关的Paper, 从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到今年cvpr最新的yolo9000。这些paper中损失函数都包含了边…

前端学习(2718):重读vue电商网站38之通过input输入框优化

通过增加 clearable 属性,我们的输入框就可以多一个 x,然后通过绑定 clear 事件,当我们进行清除 (即点击由 clearable 属性生成的清空按钮时触发)时,就会重新获取我们的用户列表,不再需要用户再次点击搜索按…

Oracle不连续的值,如何实现查找上一条、下一条

1. 遇到的问题 已知一个题库,希望实现当前页切换上一题,下一题的需求。 查看得知,数据库中用于查询的字段(主键)是不连续的。如上图所示:stxh为主键number类型。 2. 实现方式lead over 2.1 实现代码 下一条 select nowId, afte…

前端学习(2719):重读vue电商网站39之正则表达式验证邮箱和手机号码

Javascript // 验证邮箱的规则var checkEmail (rule, value, cb) > {const regEmail /^([a-zA-Z]|[0-9])(\w|-)[a-zA-Z0-9]\.([a-zA-Z]{2,4})$/if (regEmail.test(value)) {// 合法的邮箱return cb()}cb(new Error(请输入合法的邮箱))}// 验证手机号码的规则var checkMobi…

支付宝提现,单笔转账到支付宝账户

很简单。只需三个参数实现 单笔转账到支付宝账户 1、获取开放平台创建的APPID,同时必须添加 单笔转账到支付宝账户 这个功能 开放平台:https://open.alipay.com/platform/home.htm 2、登录支付宝商家中心平台:https://b.alipay.com/index.h…

前端学习(2730):重读vue电商网站40之使用vue-table-with-tree-grid

安装新的依赖 vue-tabel-with-tree-gridvue-tabel-with-tree-grid 官方文档 安装完成后,在 main.js 入口文件内先导入 tree-tabel 然后全局注册组件 tree-tabel 页面中,我们使用了如下属性: data 确定我们的数据源,columns定义我…

前端学习(2731):重读vue电商网站41之自定义格式化时间的全局过滤器

在 main.js 入口文件全局注册格式化时间的过滤器,代码如下所示: Javascript // 自定义格式化时间的全局过滤器 Vue.filter(dataFormat, function(originVal) {const dt new Date(originVal)const year dt.getFullYear()const mon (dt.getMonth() 1 …

sign check fail: check Sign and Data Fail

支付宝开发报错:com.alipay.api.AlipayApiException: sign check fail: check Sign and Data Fail 解决方法: 确认使用的支付宝公钥是否正确,不同的环境使用的支付宝公钥不同, 如沙箱环境、线上openapi网关和mapi网关对应的支付…

前端学习(2732):重读vue电商网站42之添加富文本编辑器

vue-quill-editor 官方文档传送门 通过 vue-ui 界面,可以安装我们所需要的依赖,或者使用下文 npm 或 yarn安装。 NPM Js npm install vue-quill-editor --save# or yarn add vue-quill-editorMount with global Js import Vue from vue import VueQui…

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1.前言 至于 Flutter 是啥,我就不在这啰嗦了,下面以 windows 为例,展示一下从安装 Flutter 到运行 APP 整个过程; 2.安装 Flutter 2.1、中文介绍文档:https://flutterchina.club/get-started/install/ (我的…

jquery.min.js一引入到工程中显示红叉,或其他.js文件显示红叉

1.可能的原因: Eclipse或者MyEclipse校验失败的错误,不影响程序正常执行 2.解决方案: 选择项目,右键 Myeclipse--> ManaValidation--> ExcludeResource 将出现问题的js前的复选框选中。点击“应用” “确定”。如果以上…

【JEECG技术文档】Online唯一校验使用说明

1、功能介绍 配置了唯一校验的字段,在录入和编辑页面中,动态查询用户输入值是否存在校验。 要使用online唯一校验功能必须先在online表单开发中配置唯一字段的校验方式为唯一校验。 2、配置唯一校验 登录系统,在线开发-online表单开发&#x…

eclipse 安装 lombok插件

下载插件 官网下载 :https://projectlombok.org/ 有些小伙伴官网可能打不开,现提供我的下载地址:https://files.cnblogs.com/files/niceyoo/lombok.zip 安装 lombok 插件 1、右键打开 2、选择 eclipse.exe > install 博客地址:…

Android.View.InflateException: Binary XML File Line #异常的解决

这个运行错误,主要出现在安卓系统5.0一下手机系统。在5.0以上手机系统,不会出现这个错误 错误如下:在引入自定义VIEW时报错 原因:资源文件shape_new_message.xml在drawable-v24文件夹下,而不在drawable文件夹下 解决…