前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue页面中使用浏览器自带的前进后退功能

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

作者头像
tianyawhl
发布于 2023-01-15 01:45:27
发布于 2023-01-15 01:45:27
1.4K0
举报
文章被收录于专栏:前端之攻略前端之攻略

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-01-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
动态加载用户菜单
流程是用户登录后进入模块页面,点击不同的模块,进入菜单页面(模块不同,菜单内容也不同)
tianyawhl
2020/02/18
2.3K0
动态加载用户菜单
vue实战-实现换主题/皮肤功能
接下来就是具体实现换皮肤功能了,换皮肤一般都是点击一个按钮弹出一些皮肤的选项,选中选项后皮肤生效。 我们将换皮肤功能抽成一个组件theme-switch。pc端使用iview,手机端使用了vant。一共有3套皮肤用于切换。
我的小熊不见了丶
2019/05/22
2.2K0
Vue2动态路由
    一般管理端的菜单栏是根据登录用户角色不同,动态生成的,在vue中我们不止菜单栏需要动态生成,同时我们路由也需要动态生成。
用户5899361
2023/03/25
1.1K0
Vue2动态路由
Js BOM
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
hss
2022/02/25
8370
前端猿要了解的基本浏览器(BOM)知识
window 对象 全局作用域 这个不用多讲,前面已经接触过,所有在全局作用域定义的变量都会被当做 window 对象的属性,同时 Global 对象也是基于 window 对象的。 需要注意的是,一般定义变量时,这个变量的四个数据属性都默认为 true(这个前面面向对象那里讲过),所以都是可以删除或者修改的。**可是不一样的地方就在全局作用域,在此作用域下定义的变量的数据属性之一 [[Configurable]]**默认为 false,这就导致无法删除,强行使用 delete 是无效的,在 IE9
努力的Greatiga
2022/07/25
9110
Element 带输入建议的input框
实际应用:假如把多级菜单取出最里面一级的数据,并在输入框中输入包含菜单任何位置的内容,都能过滤菜单,并不是官网例子只过滤以某些内容开头的菜单。
tianyawhl
2020/04/26
1.9K0
企业微信PC版应用跳转到默认浏览器,避坑指南,欢迎补充(Vue项目版)。。。
关于企业微信PC版应用跳转到默认浏览器,我之前写过一篇文章:企业微信PC版应用跳转到默认浏览器,避坑指南,欢迎补充。。。
zhanyd
2024/07/30
5990
企业微信PC版应用跳转到默认浏览器,避坑指南,欢迎补充(Vue项目版)。。。
vue新春游戏-年兽大作战,欢欢喜喜过大年(可在线体验)
各位掘金的xdm,又是一年新春到,在这里提前给各位兄弟们拜年了,祝大家身体健康,万事如意。今天这篇文章呢,是为了掘金新春征文诞生的,这里特意给大家写了一个小游戏,所谓技术不够创意来凑,虽然游戏用到的技术都是很一般很简单的,但是也让我准备了不少的时间,小游戏全部由自己完成,网上拼凑的资源,美术、音效可能都不完美,大家将就将就哈,希望大家能够喜欢,强烈建议大家在阅读文章之前先点击游戏链接https://heyongsheng.github.io/game/index.html 前去体验两把。
十里青山
2022/08/22
6800
vue新春游戏-年兽大作战,欢欢喜喜过大年(可在线体验)
JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离
说明: 这段代码用于获取浏览器窗口的可视高度。它首先检查 document.body.clientHeight 和 document.documentElement.clientHeight 是否都存在,然后根据情况选择较小的值作为可视高度。如果其中一个不存在,则将另一个值作为可视高度。
小蓝枣
2024/05/26
5140
JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离
Vue.js的图片加载性能优化你可以试试
图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。
Vam的金豆之路
2021/11/30
1.9K0
前端路由原理解析和实现
路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。
ConardLi
2019/05/23
1K0
支付宝授权登录淘宝_vue的登录实现
api接口文档:https://docs.open.alipay.com/289/105656
全栈程序员站长
2022/09/19
5190
支付宝授权登录淘宝_vue的登录实现
前端路由的实现原理
路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。
Daotin
2019/07/28
2.2K0
Vue.js与Node.js一起打造一款属于自己的音乐App(收藏)
自己平时喜欢钻研技术,做项目。所以有幸发现了网易云音乐Nodejs版的API。网址如下:
Vam的金豆之路
2021/12/01
7830
Vue.js与Node.js一起打造一款属于自己的音乐App(收藏)
Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
import NotFound from "@/views/Error/404";
授客
2020/02/18
3.1K0
JavaScript BOM浏览器对象模型
BOM  1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准。所以,BOM本身是没有标准的或者还没有哪个组织去标准它。 一.window对象 BOM的核心对象是window,它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层,对于每个打开的窗口,系统都会自动为其定义 window 对象。 1.对象的属性
汤高
2018/01/11
2K0
vue 项目中英文切换
最近vue项目需要中英文切换,查了资料,发现大部分都是采用 vue-i18n,但是写的比较简单,大部分都是全局引入语言包,遇到的几个问题
tianyawhl
2020/10/28
3.1K0
vue 项目中英文切换
Element NavMenu 无限级菜单
数据结构  menudata.json {"data":[ { "id": 1, "path": "/home", "menuName": "商业数据统计", "component": "Home", "childMenu":[{ "id": 2, "path": "/commercial/dataAccount/Day", "menuName": "日统计1",
tianyawhl
2020/02/17
1.5K0
Vue 折腾记 - (13) Nuxt.js写一个常规音频的播放组件,动态注入微信,新浪微博的js-sdk
全部耦合到组件内,虽然可以正常播放(包括微信和微博) 且不是单例模式,对于多音频页面,有毒
CRPER
2018/08/28
4.1K0
Vue 折腾记 - (13) Nuxt.js写一个常规音频的播放组件,动态注入微信,新浪微博的js-sdk
# 浏览器截图方案分析
html2canvasopen in new window 用的比较广泛的前端截图方案,先将 DOM 一个个 转为 Canvas 然后导出图片(使用 canvas 自带的 toDataUrl、toBobl)即可。使用起来应该是兼容性比较好的方案了,能解决大部分的需求,但是也有一写小问题,如:
九旬
2023/10/19
4350
推荐阅读
相关推荐
动态加载用户菜单
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档