vue 组件的 scrollBehavior 2

原文链接https://www.jianshu.com/p/c805b74e1f14?utm_campaign

浏览器对用户访问网页的记录

• 在聊如何管理vue组件滚动行为之前，先简单说说(毕竟深入了我也很模糊o(╯□╰)o)浏览器是如何对用户访问过的页面的保持，浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存，以上是MDN对浏览器就如何跟踪用户访问过网页的解释性说明。
• 通常我们很少会对页面回退或前进进行操作，在浏览器用户界面上提供有前进、回退按钮，页面跳转到离开页面之前的位置，而不是重新刷新页面，这个功能是由浏览器引擎(与渲染引擎、解析引擎概念不同)来完成的。当用户进入一个页面的时候，会往 history 栈中放入当前的记录，对页面级别的操作通过操作内置对象 history 可以满足一些需求。

vue对访问记录的管理

• 进入正题，vue 路由跳转就是通过对 history.pushState() 和 history.replaceState() 方法的模拟来实现，会往 history 栈中存放一条记录，这也是为什么 vue 的 router.push 方法只能在支持 history.pushState() 方法的浏览器中使用，当调用 router.go() 或者 router.back() 方法的时候就和 history.go()、history.back() 效果一样，都是对 history 栈中的记录进行访问，上述行为与通过浏览器的回退和前进效果也是一样。
  但是，在不加处理的情况下，组件的滚动行为会跟我们想象的不同。

vue组件滚动行为

• 设置三个路由 /home、/list、/about，即对应三个不同的组件，

•  <ul class="tab">
        <li>
          <router-link to="/" >首页</router-link>
        </li>
        <li>
          <router-link to="/list" >列表</router-link>
        </li>
        <li>
          <router-link to="/about" >关于</router-link>
        </li>
        <li>
          <a href="#" @click='() => { this.$router.back() }'>点击回退</a>
        </li>
    </ul>
    <router-view></router-view>

  • 每个组件的结构都是 ul>li 的结构

  •  <!-- 以 home 组件为例 -->
      <ul class="list_content home">
         <li v-for='i in 10'>{{ i }}</li>
      </ul>

     new Vue({
            router,
            data: {
                timerId: ''
            },
            mounted () {
                window.addEventListener('scroll', this.justifyPos)
            },
            methods: {
                justifyPos () {
                    if (this.timerId) clearTimeout(this.timerId)
                    this.timerId = setTimeout(() => {
                        this.$route.meta.y = window.pageYOffset
                    }, 300)
                }
            }
        }).$mount('#app')

    详细内容：https://www.jianshu.com/p/c805b74e1f14?utm_campaign