当前栏目
vue页面中使用浏览器自带的前进后退功能
在home页面created钩子中监听popstate事件
created() { window.addEventListener("popstate",this.monitorBackForward,false) monitorBackForward(){ console.log(window.location.href.split("#")[1]) let path = window.location.href.split("#")[1] var menu getMenu(this.menuData) function getMenu(menuData){ for(let i=0;i< menuData.length;i++){ if(menuData[i].path == path){ menu = menuData[i] }else{ getMenu(menuData[i].childList) } } } console.log(menu) this.$store.commit("saveCurrentMenuBtns",menu.buttonList) this.$store.commit("addTab",menu) },
并在具体的页面中使用setTimeout延迟大概100ms,延迟的原因是,等着执行完获取必要的信息 如 menuBtnsArr
computed: { menuBtnsArr() { return this.$store.state.currentMenuBtns; }, langObj() { return this.$store.state.langFile; }, }, beforeMount() { setTimeout(() => { this.allBtnObj = this.$util.btnArrToObj(this.menuBtnsArr); console.log(this.allBtnObj) }, 100); this.screenHeight = document.documentElement.clientHeight || document.body.clientHeight; }, mounted() { setTimeout(() => { this.getAlarmTypeList(); this.getConfig(); this.getList(); this.getStatusList(); this.getAlarmStatusList(); }, 100); },
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项