移动端获取手机自带的返回键并添加事件。

最新推荐文章于 2024-08-22 02:04:51 发布

加菲猫的鳄鱼

最新推荐文章于 2024-08-22 02:04:51 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue 返回键

本文链接：https://blog.youkuaiyun.com/Anticipate_/article/details/92773922

该博客围绕移动端Vue项目展开，提到在单页面展示文件信息时，点击文件夹可查看子级文件。用户点击左上角返回按钮有预设返回逻辑，而点击手机自带返回按钮时，因文件夹信息查看不触发新路由，需给自带按钮添加与顶部返回按钮相同逻辑的事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在当前的项目中，由于是移动端的项目，在手机上会有自带的返回键这时候就需要获取按键来进行返回事件。

项目中运用的是vue。在单页面中会展示当前的文件信息，如是文件夹则可以点击查看它的子级文件。当我们想返回上一级文件的时候可以点击左上角的返回按钮，这是在项目中抒写好的逻辑。

如果用户此时点击的不是左上角的返回按钮而是手机自带的返回按钮这时候触发的事件也必须和顶部的返回按钮逻辑是一样的

这时候就需要对手机的返回按钮有一些认识了，手机自带的返回按钮点击的时候回跳转到上一个路由，但是我们此时的文件夹信息查看不会触发新的路由而是在当前路由，所以这时候就需要给自带的按钮添加事件。

 //增加手机的返回按钮事件
                history.pushState(null, null, document.URL);

    activated() {
       if (window.history && window.history.pushState) {
           window.addEventListener('popstate', this.pageBack, false);//false阻止默认事件
        }
     },
    beforeRouteLeave(to, from, next) {
        alert("是否注销list的pops")
       window.removeEventListener('popstate', this.pageBack, false);
       next();
    },