使用this.$router.go(-1)遇到的一些问题及解决

前提条件

目前有这样一个需求，在列表中，点击列表的某个记录，会直接进入到A页面假设为：http://localhost:8080/#/index/123，在A页面内部有以下元素：

（1）一个返回按钮，通过this.$router.go(-1)返回，或者是window.close()直接关闭页面。

（2）一个a标签的连接，点击之后页面跳转到http://localhost:8080/#/index/234，其实还是当前A页面的路由，但是参数发生了变化，为了便于说明，这里我们假设为页面B。

（3）一个button按钮，点击之后，弹出一个模态框，模态框内内是一个ifream，ifream加载的页面为：http://localhost:8080/#/second，我们假设为C页面。

需求描述

预期想实现的效果有三种场景，分别如下：

（1）通过列表进入到页面A，点击button之后，页面C在弹框中ifream里成功加载，然后关闭模态框，然后再点击A页面的返回按钮，直接返回的到列表。

（2）在A页面，点击连接，可以在不刷新当前页面的情况下，进入到页面B(其实也A也同一个组件），然后重新渲染数据，根据234查询最新数据去加载和渲染页面。

（3）在列表页面，通过打开一个新的浏览器标签页的方式进入到页面A，在页面A中点击a标签链接，跳转到页面B，然后在B页面点击返回按钮回到A页面，再在A页面点击返回按钮，直接关闭当前标签页。

问题描述

1 无法返回到列表

在需求描述的第一种场景中，我们可以会通过给ifream直接赋值src的方式去实现，你会惊奇的发现，当关闭模态框之后，点击A页面上的返回按钮没反应，需要再点击一下才会返回到列表。 

出现这种问题的主要原因还是在于通过ifream.src赋值，因为域相同，还是会忘window.history中插入一条历史记录，这是不可避免。

如何解决该问题呢？我们可以通过replace的方式来解决。

在给ifream的src赋值的时候，可以通过如下代码：

<iframe ref="iframe"></iframe>
 
this.$refs.iframe.contentWindow.location.replace("http://localhost:8080/#/second")

2 无法渲染的页面

在需求描述的第二个场景中，如果我们在写代码的时候，直接给a标签的href赋值为http://localhot:8080/#/index/234，你会发现，当你点击链接的时候，页面没有任何的反映。

这是因为对于vue来说，路由并没有发生变化，仅仅是参数发生了变化，我们需要特殊处理。

可以通过router的beforeRouterEnter和beforeRouteUpdate两个钩子函数来解决。

如下：

beforeRouteEnter(to,from,next){
   next(vm=>vm.init());
},
beforeRouteUpdate(to,from,next){
   this.initWithObj(to);
   this.clickCount++;
   next();
},

• beforeRouterEnter是在路由发生变化进入到页面之前会走这个函数，此时组件还没有初始化，所以在这个方法内部不能使用this，只能通过next中的vm对象进行回调，init()方法是组件中自己声明的业务function，里面有axios查询以及页面渲染。注意：vm.init()调用的时机是在mountd之后。也就是说会在页面加载完成后去调用。另外就是如果路由没有发生变化，或者不是刷新页面，这个函数只有走一次，也就是说，对于我们需求中的场景，当路由参数发生变化的时候，不会重复走该方法。
• beforeRouteUpdate的应用场景刚好对应都场景2的需求，在路由不发生变化，但是参数发生变化的时候，会调用该函数。所以，我们在这个方法中，重新进行数据的请求和加载，可以看到使用的是initWithObj这个业务方法，传入的是to这个对象，主要是为了获取变化后的参数，重新请求后端接口刷新数据的。这里注意：不管是通过$router.go(-1)【对于路由发生变化的返回后页面会重新刷新】 还是$router.back()【页面不会刷新，走的缓存】，只要路由的参数发生变化了都会触发该方法。 

3 无法关闭的新页签

对于第三种需求场景，我们需要在A页面的返回按钮里面做一些业务逻辑处理，就是需要知道当前页面是否有history，有的话，可以返回，没有的话，就直接关闭页面。

查了一些博客和资料，不少人提到可以通过window.history.length来判断，这是一个误区，history.length只会增加，不会减少，所以你无法得知是不是已经到了最后一个页面了，也就无法得知是否要关闭页面。

还有一些博客提到，可以通过使用document.referrer来判断，代码如下：

if(document.referrer){
    //可以继续后退
    this.$router.go(-1);
}else{
    //不可以后退
    window.close();
}

首先，这种写法是不行的，因为document.referrer如果为空，就一直为空，他是在什么时候为空呢？

就是我们直接打开一个新的浏览页标签去渲染A页面时，document.referrer为空，即便我们在A页面点击链接跳转到B页面了，document.referrer还是为空。

所以按照如上代码写的时候，点击链接后B页面渲染，再点击返回按钮，直接关闭页签了，回不到A页面了。

而且如果按照如上的写法，我们通过列表直接跳转到A页面的场景下，点击返回按钮，也永远无法返回，因为他走的是下面的window.close().

如何兼顾页签方式打开和列表直接跳转情况下的返回或者关闭页面呢？

有没有一种方法可以知道当前通过this.$router.go(-1)是否还有页面可以继续返回呢？

答案是：没有。 我们只能根据业务场景自己去做处理。

下面看如下一段代码：

if(document.referrer || window.frames.length != parent.frames.length){
    //可以继续后退
    this.$router.go(-1);
}else{
    //没有父页面
    if(this.clickCount>0){
         this.clickCount=-1;
         this.$router.back();
    }else{
         window.close()
    }
}

这里有一个参数clickCount，在组件的data中定义，默认为0。 他的主要作用是在新浏览器页签加载A页面时，判断是否存在参数变化情况下的页面“跳转”，并实现路由的返回的。        

总结

行文至此，三种需求以及场景都可以解决了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论