VueRouter记录滚动行为-hash

by imys

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <router-link to="/foo">Foo</router-link>
  <router-link to="/bar">Bar</router-link>
  <router-view></router-view>
</div>

CSS

.foo, .bar {
  width: 100px;
  height: 100px;
  overflow-y: auto;
}

JavaScript

const Foo = { template: '<ul class="foo"><li v-for="n in 20">foo</li></ul>' }
const Bar = { template: '<ul class="bar"><li v-for="n in 20">bar</li></ul>' }

const router = new VueRouter({
	//mode: 'history',
	routes: [
    { path: '/foo', component: Foo, meta: { scrollEl: '.foo' } },
  	{ path: '/bar', component: Bar, meta: { scrollEl: '.bar' } }
  ],
  //scrollBehavior(to, from, savedPosition) {
  //	if (to.meta.scrollTop) {
  //    console.log('to', to.meta.scrollTop)
  //    document.querySelector(to.meta.scrollEl).scrollTop = to.meta.scrollTop
  //  }
  //}
})

router.beforeEach((to, from, next) => {
  if (from.meta.scrollEl) {
    from.meta.scrollTop = document.querySelector(from.meta.scrollEl).scrollTop
    console.log(document.querySelector(from.meta.scrollEl).scrollTop)
  }
  next()
})

router.afterEach(route => {
  if (route.meta.scrollTop) {
    Vue.nextTick(() => {
      console.log('after', route.meta.scrollTop, document.querySelector(route.meta.scrollEl))
      document.querySelector(route.meta.scrollEl).scrollTop = route.meta.scrollTop
    })
  }
})

const app = new Vue({
	el: '#app',
  router
})