vuejs路由回退到指定页面

tim.jpg

前言

2018年一月份已经saygoodbye，二月份是浮躁的月份。自己很少写博客，但是经常看别人写的，有做笔记的，有分享技术和面试经验的。感觉写的都很好，自己也想尝试下，记录下自己的成长，坚持写博文，希望在2018年末的时候，看到这篇博文的时候，能发现自己这一年过得很有意义...

问题场景

我们在写单页面（spa）的时候，如果页面比较复杂的话，肯定会遇到路由问题的。我们平时关注的是路由跳转，例如：从A页面->B页面->C页面，这样一级一级的跳转下去。但是在实际的开发中，碰到了这种情况，有一个列表页，点击进入详情页，详情页是可以支付的页面。我们支付成功后，跳转到成功的页面。但是如果我们按回退的页面的话，就会返到详情支付的页面，如果用户的误操作，可能会在支付一笔，这就不是我们想看到的（回退如果不缓存的话，会刷新页面，更新详情页，需要后台更改支付状态的话，也能解决）；但是我们能不能通过路由解决呢？

vue-router

在看问题之前，我们要分清楚下面编程式导航的意思（列举常用的几个）；具体用法可以查看这里，这里只做对比：

router.push();
// 会记录跳转的路由，并存在 history 栈里（具有length属性），适合不同页面的切换；

router.replace();
// 不会记录路由，回退的话，是回退不到上一个页面，适合单页面的切换；

router.go();
//这个可对比history.go()的用法；

我们在跳转页面的时候，有时候有些页面我们在回退的时候，是不想让他回退到这个页面。这样看来我们上面的问题就解决了，我们在列表页跳转详情页使用router.replace(),支付成功跳转到支付成功页面，一切看起来那么美好。但是实际情况是，我们有支付失败的情况，还想到详情页面重新支付，如果用了router.replace()回退就不能到不了那个页面了。这个时候，就需要我们导航守卫闪亮登场了...

router导航守卫

在router进阶篇里提到导航守卫，有全局的，有路由独享的，还有组件的。之前在做尝试的时候，一致迷惑在组件的守卫里，因为官网上在介绍next() 这个方法的时候，不是很理解，就在组件里尝试使用next()来改变路由，给我的结果就是报了一大堆错，正当自己放弃的时候，又看了下官网（还是官网最好,哈哈...），找到了路由独享的守卫beforeEnter...

// 假设我从A页面 -> B页面 -> C 页面，如果我按回退按钮的话，我想回到A页面，而不是正常的回退到B页面，该怎么实现呢？

//router --> index.js

import Vue from 'vue'
import Router from 'vue-router'
import a from '@/components/a' //a 组件
import b from '@/components/b' //b 组件
import c from '@/components/c' //c 组件 

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: a
    },
    {
      path: '/a',
      component: a
    },
    {
      path: '/b',
      component: b,
      beforeEnter:(to, from, next) => {
        from.path == '/c' ? next('/') :next();
      }
      //beforeEnter 在进入这个路由之前，先判断是从哪个路由跳转的
    },
    {
      path: '/c',
      component: c
    }
  ]
})

上面简单的时候了上述需求。在路由独享的守卫，使用next('/')，或者其他路由，是不会报错的，但是如果在组件里使用，是会报错的，在组件里只能使用，也必须要调用next(); 但是我们的路由嵌套的太深，如果我们回退到列表后，直接向让他跳转到首页行不行？当让可以来了，要不我怎么会问,哈哈....

因为我自己做的是混合app开发，在到首页的时候，在回退的时候，是关闭这个webview的，首页的length必须是 1，才能退出，要不然是不能退出的。这里就要提到history.length能帮我解决这个问题

history.length

运行你的项目，打开控制台，分别打印下history，history.length; 就可以看到我们的路由是保留在数组里的，并且能获得length值，那么我们就可以直接跳转到首页，此时length设置长度为1，退出就关闭webview了。

眼见为实：

image.png

这里需要注意的是history不是数组，是哈有length属性的对象。