[JavaScript知识库]【解决】vue做的h5项目页面物理返回需要按两次（WeixinJSBridge.call(“closeWindow“)、beforeRouteLeave）

【问题】

h5项目，在其中一个页面上物理返回（手机侧边栏左滑），需要操作两次才能返回上一个页面，需求是操作一次返回上一个页面。

【方法】

示例代码如下：

1. 新建一个返回组件

关闭当前窗口：WeixinJSBridge.call(“closeWindow”);

<template>
  <div></div>
</template>
<script>
export default {
  mounted() {
    WeixinJSBridge.call("closeWindow");
  },
};
</script>

2. 配置路由

{
	path:'/back', 
	name: 'back',
	component: '@/components/back.vue',
	meta: {
	    title: '首页',
},

3. 需要返回的页面上进行路由拦截（vue–组件内的守卫）

beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 this
}

beforeRouteLeave(to, from, next) {
  if (to.name === home) {
    next({ name: "back" });
  } else {
    next();
  }
},

4. 结束