zl程序教程

您现在的位置是:首页 >  Javascript

当前栏目

vue页面中使用浏览器自带的前进后退功能

2023-02-25 18:19:44 时间

在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);   },