在由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;
}