scrollBehavior的使用

基于vant 使用Tabbar
页面进行切换时，保持原页面滚动条位置不变
router /index.js

import Vue from 'vue'
import Router from 'vue-router'	
Vue.use(Router)

export default new Router({
	 scrollBehavior(to, from, savedPosition) {
	    if (savedPosition && to.meta.keepAlive) {
	     return savedPosition;
	    }
	    return to.meta;
	   },
	    routes: [{
		      path: '/tab',
		      name: 'tab',
		      component: () => import('../views/3.2/tabTest.vue'),
		      meta: {
		        keepLive: true
		      },
		      children: [
		        {
		          path: '/search',
		          name: 'search',
		          component: () => import('../views/3.2/search.vue'),
		          meta: {
		            keepLive: true,
		            x:0,
		            y:0
		          }
		        },
		        {
		          path: '/home',
		          name: 'home',
		          component: () => import('../views/3.2/home.vue'),
		          meta: {
		            keepLive: true,
		            x:0,
		            y:0
		          }
		        },
		      ]
    },]
}}

tabTest.vue

<template>
  <div class="tabTest">
    这是tab
    <router-view></router-view>

    <van-tabbar v-model="active" route>
      <van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      timeId: ""
    };
  },
  mounted() {
    window.addEventListener("scroll", this.justifyPos);
    window.onscroll = this.justifyPos;
  },
  methods: {
    justifyPos() {
      if (this.timeId) clearTimeout(this.timeId);
      this.timeId = setTimeout(() => {
        this.$route.meta.y = window.pageYOffset;
      }, 300);
    }
  },
  destroyed() {
    // 当组件销毁的时候，移除滚动行为监听, 清空定时器；
    // 该方法是绑定到 window 身上，即使跳转到其他组件，仍然会监听页面的滚动行为
    console.log("页面销毁了");

    window.removeEventListener("scroll", this.justifyPos);
    clearTimeout(this.timerId);
  }
};
</script>

<style lang='less'>
</style>

search.vue 、home.vue

<template>
  <div>
    <div v-for="el in 50" :key="el">{{el}}</div>search
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
</style>