Vue 滚动行为的具体使用方法


Posted in Javascript onSeptember 13, 2017

滚动行为

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在 HTML5 history 模式下可用。

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

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
 // return 期望滚动到哪个的位置
}
})

返回滚动位置的对象信息

{ x: number, y: number }
{ selector: string }

如果返回一个布尔假的值,或者是一个空对象,那么不会发生滚动。

<div id="app">
  <h1>滚动行为</h1>
  <ul>
    <li><router-link to="/">首页</router-link></li>
    <li><router-link to="/foo">导航</router-link></li>
    <li><router-link to="/bar">关于</router-link></li>
    <li><router-link to="/bar#an1">红色页面</router-link></li>
    <li><router-link to="/bar#an2">蓝色页面</router-link></li>
  </ul>
  <router-view></router-view>
</div>
<script>
  var Home = {
    template:"<div>home</div>"
  }
  var Foo = {
    template:"<div>foo</div>"
  }
  var Bar = {
    template:
      `
        <div>
          bar
          <div style="height:500px;background: yellow;"></div>
          <p id="an1" style="height:500px;background: red;">红色页面</p>
          <p id="an2" style="height:300px;background: blue;">蓝色页面</p>
        </div>
      `
  }

  var router = new VueRouter({
    mode:"history",
    //控制滚动位置
    scrollBehavior (to, from, savedPosition) {
      //判断如果滚动条的位置存在直接返回到当前位置,否者返回到起点
      if (savedPosition) {
        return savedPosition
      } else {
        if (to.hash) {
          return {selector: to.hash}
        }
      }
    },
    routes:[
      {
        path:"/",component:Home
      },
      {
        path:"/foo",component:Foo
      },
      {
        path:"/bar",component:Bar
      }
    ]
  });
  var vm = new Vue({
    el:"#app",
    router
  });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DIV始终居中的js代码
Feb 17 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
VUE动态生成word的实现
Jul 26 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vite + React从零开始搭建一个开源组件库
Jun 25 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 #Javascript
VUE实现一个分页组件的示例
Sep 13 #Javascript
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 #Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 #Javascript
Js利用Canvas实现图片压缩功能
Sep 13 #Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 #Javascript
You might like
php全角字符转换为半角函数
2014/02/07 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python K近邻算法的kd树实现
2018/09/06 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python中sys模块是做什么用的
2020/08/16 Python
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
应届生高等护理求职信
2013/10/12 职场文书
生产班组长岗位职责
2014/01/05 职场文书
幼儿园门卫制度
2014/01/29 职场文书
挂职自我鉴定
2014/02/26 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
任命书怎么写
2014/06/04 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2014年库房工作总结
2014/11/26 职场文书
居住证明范文
2015/06/17 职场文书
单位接收证明格式
2015/06/18 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏