场景
一个带可切换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();
}
}
以上代码是从案例中截取的主要部分，简化代码只为了说明实现方式，并不保证能够独立运行。
至此，整个需求才算完整实现。
物理返回的期望交互
网友评论