vue通过 vue.mixin（混合）实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置

main.js 中编写全局混合事件，会在子组件前出发对应事件，此功能需要以下几个条件：

1.滚动页面必须为 keep-alive：true，



通过meta.keppAlive去动态加载需要缓存的组件，以后只需要在路由index.js里把false改成true



/*

*  核心代码

*/

Vue.mixin({

data(){
return {
prev_Scroll_Top:0,
prev_Page_Param:null,
cur_Page_Param:null,
scrollBox:"",
scrollContent:"",
}
},
methods:{
_jmpScroll(){
if(this.prev_Scroll_Top){
console.log("needJmp");
var self = this;
$(self.scrollBox).scrollTop(self.prev_Scroll_Top + 30);
}
},
_calcParams(){
var curparams = null;
var fullPath = this.$route.fullPath;
var ind = fullPath.indexOf("?");
if(ind>-1){
curparams = fullPath.substr(ind+1,fullPath.length);
}
this.cur_Page_Param = curparams;

if((this.prev_Page_Param == this.cur_Page_Param) && this.cur_Page_Param){
this._jmpScroll();
}else{
this.prev_Scroll_Top=0;
}
this.prev_Page_Param = this.cur_Page_Param;
this.cur_Page_Param = null;
},
_divBindScroll(){
var self = this;
$(self.scrollBox).scroll(function(){
var BoxoffsetHeight = Math.abs($(self.scrollContent).offset().top);
console.log(BoxoffsetHeight);
self.prev_Scroll_Top = BoxoffsetHeight;
});
}
},
activated(){
this._calcParams();
this._divBindScroll();
}

})

var vm = new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
}
})

注：子组件data中需要加入
8b38
以上两个对应的滚动盒子和内容。scrollBox: scrollContent:，例如：



切换页面时，判断是否跳转滚动位置，是根据query的参数，所以如果你没有参数，此情况不适用。