vue实现微信浏览器左上角返回按钮拦截功能

介绍：Vue可以通过使用路由导航守卫来拦截某些操作，其中之一就是拦截微信浏览器左上角的返回按钮。本攻略将详细介绍如何使用Vue及路由导航守卫实现微信浏览器左上角返回按钮的拦截功能。

步骤：

1.安装Vue Router

安装Vue Router是实现路由动态跳转的必要前提。使用npm或yarn，运行以下命令：

npm install vue-router

OR

yarn add vue-router

2.建立Vue Router实例

Vue Router需要有一个实例来管理页面位置和路由的跳转。建立Vue Router实例的方式是在Vue应用中导入Vue Router并实例化：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入路由文件
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  // 路由规则
  routes
})

export default router

3.使用Vue Router的导航守卫

Vue Router提供了多个导航守卫来控制路由的跳转。使用导航守卫中的beforeEach方法，可以拦截页面返回事件。在beforeEach方法中，需要先判断当前页面是否是从微信浏览器进入，如果是，则改变路由为/interceptBack，防止页面直接返回。可以如下定义导航守卫：

import router from './router'

// 在路由跳转前，判断当前环境是否为微信浏览器
router.beforeEach((to, from, next) => {
  const ua = navigator.userAgent.toLowerCase()
  // 判断当前用户代理是否为微信浏览器
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    // 当用户在微信浏览器中打开该页面
    if (to.path === from.path) {
      // 解决微信浏览器h5页面直接返回到微信公众号的问题
      next({
        path: '/interceptBack'
      })
    } else {
      next()
    }
  } else {
    // 当用户不在微信浏览器中打开该页面
    next()
  }
})

在以上代码中，当判断当前用户代理为微信浏览器后，如果用户在微信浏览器中打开该页面，则判断跳转前后路由是否相同。如果相同，说明用户是从微信公众号进入的，需要拦截跳转并替换路由为/interceptBack，否则继续正常跳转。如果用户不在微信浏览器中，则直接跳转。

4.定义interceptBack路由

interceptBack路由用于接收从beforeEach拦截的页面返回事件，可以在该路由中实现页面的逻辑跳转。可以在路由文件中定义该路由

import InterceptBack from '../views/InterceptBack.vue'

const routes = [
  {
    path: '/interceptBack',
    name: 'InterceptBack',
    component: InterceptBack
  }
]

5.在InterceptBack组件中处理页面逻辑

在InterceptBack组件中，可以实现页面的逻辑跳转。例如，可以跳转到页面的首页，如下所示：

<template>
  <div></div>
</template>

<script>
export default {
  name: 'InterceptBack',
  mounted() {
    this.$router.replace('/')
  }
}
</script>

在mounted生命周期中，通过$router.replace('/')方法来跳转到首页。当用户点击微信浏览器返回按钮时，会直接跳转到InterceptBack路由，并且通过mounted方法跳转到首页。这样就可以在微信浏览器中拦截页面的返回事件了。

示例:

下面提供两个示例，第一个是在点击返回按钮后弹出Confirm提示，第二个是在点击返回按钮后记录滚动位置：

1.在InterceptBack组件处理返回事件时，弹出Confirm提示

在InterceptBack组件内，可以监听history的返回事件，当用户点击微信浏览器的返回按钮时，页面会返回到InterceptBack组件，因此可以在该组件内监听到返回事件。然后，可以调用window.history.forward()方法，再弹出Confirm提示，问用户是否确认离开页面。实现如下：

<template>
  <div></div>
</template>

<script>
export default {
  name: 'InterceptBack',
  mounted() {
    // 调用history.forward()使页面重定向
    window.history.forward()
    // 弹出确认框
    if (confirm('确定离开该页面吗？')) {
      // 用户确认离开页面，返回首页
      this.$router.replace('/')
    } else {
      // 用户取消离开页面，返回当前页面
      window.history.go(-1)
    }
  }
}
</script>

2.在InterceptBack组件记录滚动位置，在返回时恢复滚动位置

在InterceptBack组件内，可以记录页面的滚动位置，通过sessionStorage来存储，然后在页面跳转之前再读取此位置信息并还原滚动位置。代码如下所示：

<template>
  <div></div>
</template>

<script>
export default {
  name: 'InterceptBack',
  mounted() {
    // 记录页面滚动位置
    sessionStorage.setItem('scrollPosition', window.scrollY)
    // 跳转到首页
    this.$router.replace('/')
  },
  destroyed() {
    // 判断页面加载的来源
    if (performance.navigation.type != 1) {
      // 页面不是通过单击前进或后退按钮加载的，恢复页面滚动位置
      window.scroll(0, sessionStorage.getItem('scrollPosition'))
    }
  }
}
</script>

在mounted生命周期中，使用sessionStorage.setItem('scrollPosition', window.scrollY)存储页面的滚动位置，然后跳转到首页。在destroyed生命周期中，通过判断页面加载的来源，如果页面不是通过单击前进或后退按钮加载的，则使用window.scroll(0, sessionStorage.getItem('scrollPosition'))恢复页面滚动位置。这样，在返回时，页面会自动恢复滚动位置，提供更好的用户体验。

以上就是使用Vue及路由导航守卫实现微信浏览器左上角返回按钮拦截功能的完整攻略。