引言

思路

1. 实现一个Vue工具history.js，通过堆栈的方式维护页面跳转的历史记录，控制返回跳转。

2. 扩展一个获取上个路由的方法。

3. 在全局路由router.js中，实例化路由前，通过原型扩展router的goBack()方法

4. 在router路由守卫afterEach的生命周期中存放历史记录。

实现

// src/utils/history.js

const History = {
  _history: [], // 历史记录堆栈
  install(Vue) {
    // 提供Vue插件所需安装方法
    Object.defineProperty(Vue.prototype, '$routerHistory', {
      get() {
        return History
      },
    })
  },
  push(path) {
    // 入栈
    this._history.push(path)
  },
  pop() {
    this._history.pop()
  },
  canBack() {
    return this._history.length > 1
  },
  lastHistory() {
    return this._history.length > 1 ? this._history[this._history.length - 2] : '/'
  },
}
export default History

// src/router/index.js
 
import Vue from 'vue'
import Router from 'vue-router'
import History from './utils/history';
 
Vue.use(Router);
Vue.use(History);
 
// 实例化之前，扩展Router
Router.prototype.goBack = function () {
 this.isBack = true;
 this.back();
}

// src/router/index.js
 import History from './utils/history';
// afterEach记录历史记录
router.afterEach((to, from) => {
   if (router.isBack) {
     // 后退
     History.pop();
     router.isBack = false;
     router.transitionName = 'route-back';
   } else {
     History.push(to.path);
     router.transitionName = 'route-forward';
   }
})

if (this.$routerHistory.lastHistory().indexOf('/router') !== -1) {
  this.$router.push({
    path: '/',
  })
} else {
  this.$router.goback()
}