vue-cli单页面多入口的跳转及返回的一套解决方案

在由vue-cli构件的项目中,因为是单页面应用,经常导致手机多个地方有切入口的时候,做返回和跳转经常出现一些问题.

个人感觉可以整体对页面的浏览轨迹进行方法控制,不用借助原来的this.$router.go(-1)方法.

实现起来也很简单.就是做个公共数组变量来处理浏览的前进和后退.
historyrecords.js

var historyrecords = [];
  export default {
    historyrecords
  }

main.js引入

//定义一个总的历史记录管理数组
import historyrecords from "./publicjs/historyrecords";
Vue.prototype.$historyrecords = historyrecords;

然后到子页面进行处理

this.$historyrecords.historyrecords = common.handlehistoryrecords(
      this.$historyrecords.historyrecords
    );

公共方法里:

handlehistoryrecords: function (historyrecords) {
    if (!historyrecords || historyrecords.length == 0) {
      historyrecords = [
        {
          pageindex: 0,
          pageurl: window.location.href,
          pagehash:window.location.hash
        }
      ];
    } else {
      let lastobj = historyrecords[historyrecords.length - 1];
      let lasthashshort = lastobj.pagehash.split("?")[0];
      if (window.location.href.indexOf(lasthashshort)!=-1) { 
        return historyrecords;
      }
      if (historyrecords.length>=2) { 
        let prelastobj = historyrecords[historyrecords.length - 2];
        let prelastobjshort = prelastobj.pagehash.split("?")[0];
        if ( window.location.href.indexOf(prelastobjshort)!=-1) { 
          historyrecords.pop();
          return historyrecords;
        }
      }
      let getlength = historyrecords.length;
      historyrecords.push({
        pageindex: getlength,
        pageurl: window.location.href,
        pagehash:window.location.hash
      });
    }
    return historyrecords;
  }