Vue核心技术-44,vue-router-滚动行为

一,前言

项目开发中,会有从列表跳转到详情,在回到列表的场景
这时通常都要记住列表页滚动条的位置,否则返回后列表回默认回到顶部

Vue-router提供了滚动行为的管理,这篇就来介绍一下

---

二,scrollTo()方法

控制滚动条滚动到某一固定位置，使用scrollTo()方法

scrollTo(xpos,ypos)

xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos：必需。要在窗口文档显示区左上角显示的文档的 y 坐标。
如:window.scrollTo(100,500);

---

三,Vue-router滚动行为介绍

vue-router可以让开发者定制路由切换时页面如何滚动
注意:这个功能只在HTML5 history模式下可用

创建Router实例时,可提供一个scrollBehavior方法:

const router = new VueRouter({
 routes: [...],
 // scrollBehavior方法接收to和from路由对象
 // 第三个参数savedPosition:仅当通过浏览器前进/后退按钮触发时才会有值
 // 方法返回滚动位置的对象信息
 scrollBehavior (to, from, savedPosition) {
  // return 期望滚动到哪个的位置
 }
})

在按下后退/前进按钮时,记录滚动条位置:

scrollBehavior (to, from, savedPosition) {
 // 有值就设置滚动条,每值就到顶部
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
}

模拟”滚动到锚点”行为:

scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
  return {
   selector: to.hash
  }
 }
}

使用路由元信息更细颗粒度地控制滚动

routes: [
 { path: '/', component: Home, meta: { scrollToTop: true }},
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar, meta: { scrollToTop: true }}
]

完整例子:

// 滚动行为:
const scrollBehavior = (to, from, savedPosition) => {
 if (savedPosition) {
  // savedPosition is only available for popstate navigations.
  return savedPosition
 } else {
  const position = {}
  // new navigation.
  // scroll to anchor by returning the selector
  if (to.hash) {
   position.selector = to.hash
  }
  // check if any matched route config has meta that requires scrolling to top
  if (to.matched.some(m => m.meta.scrollToTop)) {
   // cords will be used if no selector is provided,
   // or if the selector didn't match any element.
   position.x = 0
   position.y = 0
  }
  // if the returned position is falsy or an empty object,
  // will retain current scroll position.
  return position
 }
}

const router = new VueRouter({
 mode: 'history',
 scrollBehavior,
 routes: [
  { path: '/', component: Home, meta: { scrollToTop: true }},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]
})

---

四,Vue-router滚动行为应用

根据上边介绍的功能做一个简单的测试,还是使用上篇的例子做简单修改

多次赋值首页路由组件内容,使之出现滚动条:

<template>
  <div  >
      <h2>首页</h2>
      <p>{{msg}}</p>
      <p>{{msg}}</p>
      <p>{{msg}}</p>
      <p>{{msg}}</p>
      <p>{{msg}}</p>
      <p>{{msg}}</p>
      <p>{{msg}}</p>
      ...
      ...
  </div>
</template>

<script>
</script>

<style>
</style>

修改路由器配置文件,添加滚动行为支持

import Vue from 'vue'
import VueRouter from 'vue-router'
import Product from '../pages/Product.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import ProductList from '../pages/ProductList.vue'

Vue.use(VueRouter)

export default new VueRouter ({
  // 使用history模式
  mode:"history",
  // 控制滚动位置
  scrollBehavior (to, from, savedPosition) {

    console.log(savedPosition)
    console.log(to.path)
    console.log(from.path)

    // 判断如果滚动条的位置存在直接返回到当前位置，否者返回到起点
    //if (savedPosition) {
    //  return savedPosition
    //} else {
    //  return { x: 0, y: 0 }
    //}
  },
  routes: [
    ...
  ]
})

运行程序进行测试:
页面初始化出现滚动条:

操作滚动条使页面下拉一段距离:

切换到商品页面:

此时点击浏览器返回页面(或商品页上的返回按钮),返回至首页:

此时点击返回按钮,首页保持离开时的滚动条位置,并且savedPosition对象为当前滚动条位置信息对象

---

五结尾

关于滚动行为就简单介绍到这里,更深入的使用后续会补充进来