VUE 单页面实现更优的物理返回交互机制

场景

一个带可切换tab的移动端页面，基本页面交互如下：
1.用户通过点击选卡（tab）可切换不同内容。
2.该页面还有霸屏的弹窗，当用户做物理返回操作的时候，首先关闭弹窗，再返回到上一级页面：

场景演示

页面并没有记录下当前选卡，所以当页面刷新后，选卡及内容始终呈现的是默认设置的第一项。这本身并没有太大的问题，然而……

新需求

用户要求在刷新页面后仍能停留在当前选卡！这个需求可以有多种方式实现，比如在每次切换选卡时都记录下该选卡值，不论是通过 vuex 或者 storage，都不是最好的实现。通过把当前选卡项显式地记录在 URL 上（比如 vue-router 中的 params 或 query）让页面观察路由的变化来决定切换到哪个选卡，这样一来除非 URL 变化，否则无论如何都不会丢失当前选卡项的值：

http://www.something.com/#/page_a/tab1

这才是最佳实践：

页面刷新

但这样做带来了新问题——因为选卡切换与 $router 互相影响，在切换选卡的时候也会同步修改 router，通常用 push 方法会生成新的路由历史，于是当用户想要通过物理返回直接回到上级页面前，会先回放之前留下的选卡切换操作，直到回退完所有的操作历史才能到达上级页面：

待解决问题的演示

显然，用户不想改变固有的操作习惯，仍然希望在当前页面操作的物理返回能够直接退到上级页面！
于是，我们要解决这个问题，避免产生路由记录记录。

方案

vue-router 提供了 replace 方法，相对于 push，它同样会指向并跳转到新路由，但是完全覆盖当前路由，而不是追加到路由的历史记录中。
于是把 push 替换成 replace 就好了，就那么简单！

首先添加路由的 param（也可以利用 query），它必须被显式地申明在路径上：

{
  path: '/page_a/:tab', // 在路由中添加 param
  name: 'page_a',
  component: './views/page_a.vue'
}

页面模板大致是这样的：

<template>
  <tabs>
    <!-- 切换选卡时标识 tabSwitching -->
    <tab
      v-for="(tab,i) in tabs"
      :key="i"
      @click="tabIndex=i"
      :class="{current:tabIndex===i}">
        {{tab.label}}
    </tab>
  </tabs>
  <component :is="tab"></component>
</template>

脚本部分，观察路由 $route.params.tab 的变化，这就实现了需求的基本功能：

data(){
  return{
    tabIndex:0,
    tabs:[
      {label:'一',name:'tab1'},
      {label:'二',name:'tab2'},
      {label:'三',name:'tab3'}
    ]
  }
},
computed: {
  tab() {
    return this.$route.params.tab || this.tabs[0].name
  }
},
watch:{
  // 观察路由的param
  tab: {
    handler: function (tab) {
      // 根据 $route.params.tab 设定当前选卡
      this.tabIndex = this.tabs.findIndex(item => item.name === tab)
    },
    immediate: true
  },
  tabIndex(index) {
    let tab = this.tabs[index].name;
    // 切换后改变
    this.$router.replace({ // 重点
      params: {
        tab: tab
      }
    })
  }
},
methods: {
  /** 观察并控制霸屏弹窗的开启状态
  * @returns Boolean 用以判断是否阻断路由进程
  */
  watchShow() {
    let stop=false
    if (this.filterPersonShow) {
      this.filterPersonShow = false;
      stop = true;
    } else if (this.filterShow) {
      this.filterShow = false;
      stop = true;
    }
    return stop
  }
}

我们需要对路由行为做拦截，在物理返回操作发生时，当发现有未关闭的霸屏弹窗就主动关闭并停止路由进程：

beforeRouteLeave(to, from, next) {
  if (this.watchShow()) {
    next(false);
  } else {
    next();
  }
}

^{以上代码是从案例中截取的主要部分，简化代码只为了说明实现方式，并不保证能够独立运行。}
至此，整个需求才算完整实现。

物理返回的期望交互