🏃 场景描述

在页面中，经常会带有“返回”按钮。对于这些返回功能的实现，可能会有以下两种常见的处理方式：

调用加载历史栈的前一个地址的API，例如vue-router提供的router.back()，如下代码所示。

back(){
    this.$router.back()
     }

但这种实现方式存在的问题是：如果用户是直接在浏览器地址栏输入`URL`进入该页面，当用户点击返回按钮时，会因为历史栈只存在当前地址而无跳

直接跳转到一个写死的对应上一个页面的地址，如下代码所示。

back(){
    // 跳转到该地址上一级的页面 
    this.$router.push('/xxx') 
    }

但这种写法存在的问题，如果该页面可以被多个不同地址的页面跳转进入访问。则当点击返回时，就有可能返回不到用户之前访问的页面。

举一个常见的场景：如果用户处于_表格页面_，其URL为/table?current=3，current代表表格分页页码。当用户点击查阅表格中一个条目而进入_详情页面_，然后再试图通过点击_详情页面_的返回按钮回到刚刚访问的表格页面时，如果开发者写死了返回地址为/table，表格会因为current的缺失而呈现第 1 页的数据，和用户想继续查看第 3 页的数据的行为预期不一致，从而影响用户的体验。

那么，有没有一种方法可以完美解决上述的情况呢。

🏄 思路分析

解决思路其实很简单：在每次返回时，看一下历史栈是否存在前一个地址，如果有直接调用back()之类的API，如果没有，则直接跳转到写死的对应上一个页面即可，如下所示：

back() {
  // 通过hasBackHistory布尔量来判断历史栈是否存在前一个地址
  if (this.hasBackHistory) {
    this.$router.back();
  } else {
    this.$router.push('xxx');
  }
}

那么问题是，如何知道历史栈是否存在前一个地址呢？只要同时符合以下两种条件都可以判断存在前一个地址：

存在前一个路由：无论是vue-router还是react-router，都会生成一个初始路由，我们可以通过判断当前路由下的前一个路由是否等于初始路由
**浏览器的导航行为类型为push：如果是replace和pop（即go、back或者浏览器前进后退按钮导致的路由变动**），其前一个路由虽然会被vue-router和react-router记录，但本质上是不可以跳转的过去的。

由于vue-router和react-router的设计和提供的API不一样，因此对于上述思路的实现方式都不一样。下面的解决方案中会分vue和react两种场景去分析如何得知历史栈是否存在前一个地址。

🎣 解决方案

🏊 在 Vue 项目中如何实现

适用的依赖版本为：

vue: 2.6以上
vue-router：3.6以上

在vue中可以直接借用vue-router提供的beforeRouteEnter来处理。实现步骤如下所示：

由于Vue-Router没有提供可以判断导航行为类型的API，因此只能在Vue-Router通过hack来记录导航行为类型，如下所示：

const originPush = VueRouter.prototype.push;
VueRouter.prototype.push = function () {
    this.currentNavigateType = "push"; return originPush.apply(this, [...arguments]);
 };

const originReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function () {
    this.currentNavigateType = "replace"; return originReplace.apply(this, [...arguments]);
 };

const originGo = VueRouter.prototype.go;
VueRouter.prototype.go = function () {
    this.currentNavigateType = "go"; return originGo.apply(this, [...arguments]);
 };

在beforeRouteEnter路由守卫函数中获取前一个路由，然后对之前说的两种条件进行判断，如下所示：





    
    
    
    
        
            微信登录/注册
            
                
            
            

                切换手机号登录
            
        
        
            {{ bind_phone ? '绑定手机' : '手机登录'}}
            
                
                    
                
                
                    
                    
                
                
                    
                    {{codeText}}
                
                登录
            
            
                
                切换微信登录/注册
            
            
                
                暂不绑定
            
        




        
            
        
    


    
    


    
        
        
            
            咨询热线
        
        400-8888-794
        
		
    
    
        
        微信扫码咨询
    
    
        
        源码下载
    
    
        
        帮助文档
    
	
		
		返回顶部

对于页面的"返回"操作，这样处理比较合适

🏃 场景描述

🏄 思路分析

🎣 解决方案

🏊 在 Vue 项目中如何实现