手机页面切屏、息屏，各种路由跳转的情况

perfect_wyj

已于 2022-09-01 15:07:58 修改

阅读量600

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 vue

于 2022-08-10 16:18:33 首次发布

本文链接：https://blog.csdn.net/yingjiekuaile/article/details/126230200

版权

这篇博客总结了移动端项目中遇到的手机切屏和路由跳转问题，特别是涉及Vue.js的场景。讨论了如何处理tab定位，以及在多个入口页面进入详情并需要返回多种页面的复杂情况。提到了beforeLeave钩子函数和使用本地存储作为标记来确定退出路径。这是对Vue.js前端开发中路由管理的一个实践经验分享。

摘要由CSDN通过智能技术生成

宁波某项目经验总结，手机页面切屏、息屏，各种路由跳转的情况

移动端项目经验总结

移动端项目经验总结

手机切屏

data 数据
      flagScreen: false,  // 判断是否息屏状态
      timeScreen: 0  // 切屏时计时器时间
      
methods 方法
screenPrint() {  //计时器中调用的监听屏幕方法
      var that = this   //方法中将vue的this对象 单独定义
      document.addEventListener('visibilitychange', function() {  //当屏幕改变时 监听屏幕切屏动作
        if (document.visibilityState === 'visible') { //切屏动作，点亮屏幕
          if (that.flagScreen) {
            // alert('您在' + that.timeScreen + 's时撤出，欢迎回来继续！')
            that.time = that.timeScreen
            that.flagScreen = false
          }
          // 重新请求接口获取数据
        }
        if (document.visibilityState === 'hidden') {//切屏动作，息屏
          that.flagScreen = true
          that.timeScreen = that.time
          // do something else
          // 计时器罢工
        }
      })
    },