Vue.js路由回退到指定页面

vue-router

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

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

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

router导航守卫

router导航守卫有全局的、路由独享的、组件的。

假设从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()

history.length

运行项目，打开控制台，分别打印下history和history.length，可以看到路由是保留在数组里的，并且能获得length值，那么我们就可以直接跳转到首页

let len = history.length;
history.go(-(len-1));