滚动行为

使用前端路由,当切换到新路由时,想要页面滚动到顶部或者是保持原先的滚动位置,就像重新加载页面那样。

vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

注意:这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个Router实例,你可以提供一个scrollBehavior方法

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
// to:要进入的目标路由对象,到哪里去ss
console.log(to)
// from:离开的路由对象,从哪儿来
console.log(from)
// savedPosition: 会记录滚动条的坐标,点击"后退/前进" 时的记录值(x:?,y:?)
console.log(savedPosition)
}
})

scrollBehavior方法接收 tofrom 路由对象。第三个参数 savedPosition当且仅当 popstate 导航(通过浏览器的 前进/后退 按钮触发)时才可用。

该方法返回滚动位置信息,如下所示:

  • { x: number, y: number }
  • { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个falsy值(falsy不是false,参考文档),或者是一个空对象,那么不会发生滚动。

举例:

scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}

对于所有路由导航,简单的让页面滚动到顶部。

返回 savePosition ,在按下 后退/前进 按钮时,就会像浏览器的原生表现那样:

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
}
}
}

还可以利用路由元信息更细颗粒度的控制滚动。详细例子请移步这里

异步滚动

2.8.0 新增

scrollBehavior (to,from,savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({x:0,y:0})
},500)
})
}

将其挂在到从页面级别的过渡组件的事件上,令其滚动行为和页面过渡行为一起良好运行是可能的。但是考虑到用例的多样性和复杂性,我们仅提供这个原始的借口,以支持不同用户场景的具体实现。

具体实现例子


const HomePage = () => import('@/page/homePage/HomePage-2.0'); /* 首页 */ const ProductDetail = () => import('@/page/serviceProvider/ProductDetail'); /* 主要产品详情 */ const scrollBehavior = (to, from, savedPosition) => {
let returnData = {}
if(savedPosition){
returnData = savedPosition
}
else{
returnData.x = 0
returnData.y = 0
}
return returnData
} export default new Router({
mode: 'history',
scrollBehavior,
routes: [
{
path: '/',
name: 'HomePage',
component: HomePage, /* 首页 */
children: [
{
path: '/ProductDetail',
name: 'ProductDetail',
component: ProductDetail, /* 产品详情 */
},
]
}
]
})

Vue Router滚动行为 scrollBehavior的更多相关文章

  1. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  2. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

  3. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  4. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  5. 每日技术总结:vue router传参方式,js获取设备高度

    今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...

  6. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  7. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  9. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

随机推荐

  1. webpack热加载:修改文件自动刷新浏览器并更新

    概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...

  2. IDEA 图标介绍。 缓存和索引介绍、清理方法和Debug使用

    一.图标 二.缓存和索引 IntelliJ IDEA 的缓存和索引主要是用来加快文件查询,从而加快各种查找.代码提示等操作的速(上图中的图标能这样显示也是靠索引).某些特殊条件下,IntelliJ I ...

  3. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  4. ajax接口和后台交互

    //定义一个公众处理ajax的方法 function handelAjax(url,method,parm,callback) { $.ajax({ url:url, type:method, dat ...

  5. python3中的range函数返回的是列表吗?

    注意,这里说的Python3里面的range函数,和Python2是不同的,返回的不是列表,是可迭代对象. 在python3中,如果执行下面的语句 print(range(10)) 得到结果是 ran ...

  6. CSS 基础:HTML 标记与文档结构(1)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  7. leetcode — reverse-integer

    /** * Source : https://oj.leetcode.com/problems/reverse-integer/ * * Created by lverpeng on 2017/7/4 ...

  8. 网络基础知识-TCP/IP协议各层详解

    TCP/IP简介 虽然大家现在对互联网很熟悉,但是计算机网络的出现比互联网要早很多. 计算机为了联网,就必须规定通信协议,早期的计算机网络,都是由各厂商自己规定一套协议,IBM.Apple和Micro ...

  9. Trie(字典树)解析及其在编程竞赛中的典型应用举例

    摘要: 本文主要讲解了Trie的基本思想和原理,实现了几种常见的Trie构造方法,着重讲解Trie在编程竞赛中的一些典型应用. 什么是Trie? 如何构建一个Trie? Trie在编程竞赛中的典型应用 ...

  10. 安装searchd

    把安装包解压到 D:coreseek 创建表 create table product( id int key auto_increment, title ), content text ); ins ...