详解10分钟学会vue滚动行为

滚动行为

什么是路由的滚动行为

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

注意: 这个功能只在 HTML5 history 模式下可用。在这个模式下我们需要启动一个服务

我们用scrollBehavior 方法来做路由滚动

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

下面我们做一个小案例来了解一下

效果

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

vue滚动小案例

https://besmall.github.io/vue-gundong/

https://github.com/Besmall/vue-gundong

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    滚动行为 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意: 这个功能只在 HTML5 history 模式下可用. scrollBehavior 方法接收 to 和 from 路由对象.第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用. const router = new VueRo

  • Vue-Router进阶之滚动行为详解

    滚动行为 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意: 这个功能只在 HTML5 history 模式下可用. 当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法: var router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosi

  • 详解10分钟学会vue滚动行为

    详解10分钟学会vue滚动行为

    滚动行为 什么是路由的滚动行为 当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样 注意: 这个功能只在 HTML5 history 模式下可用.在这个模式下我们需要启动一个服务 我们用scrollBehavior 方法来做路由滚动 scrollBehavior 方法接收 to 和 from 路由对象.第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用 下面我们做一个小案例来了解一下 效果 <

  • 10分钟学会Visual Studio将自己创建的类库打包到NuGet进行引用(net,net core,C#)

    10分钟学会Visual Studio将自己创建的类库打包到NuGet进行引用(net,net core,C#)

    目录 前言 创建类库方法 NuGet发布到服务器 1.登录NuGet账号获取API keys 2.下载Nuget.exe并发布项目 3.NuGet发布到服务器 参考文献 前言 NuGet就是一个包(package)管理平台,确切的说是 .net平台的包管理工具,它提供了一系列客户端用于生成,上传和使用包(package),以及一个用于存储所有包的中心库. 对于一个现代化的开发平台,建立一种让开发者创建,分享与使用可复用代码的机制是十分必要的.这种"可复用代码"被打包后的文件通常被称作&

  • 10分钟学会VS NuGet包私有化部署

    10分钟学会VS NuGet包私有化部署

    目录 前言 什么是BaGet 搭建私有化BaGet服务器 使用私有化程序包 前言 我们之前实现了打包发布NuGet,但是发布后的引用是公有的,谁都可以访问,显然这种方式是不可取的. 命令版本:10分钟学会Visual Studio将自己创建的类库打包到NuGet进行引用(net,net core,C#) web版本(推荐):小白2分钟学会Visual Studio将引用包打包到NuGet上 其实官方也提供了私有化部署(NuGet.Server.ProGet.MyGe等),我们就来基于BaGet进

  • 详解如何实现在Vue中导入Excel文件

    详解如何实现在Vue中导入Excel文件

    目录 一.安装依赖 二.template中 三.script中js代码 以将此Excel导出为json数据为例 一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.template中 <span>导入表格</span> <input id="upload" type="file" @chan

  • 详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法 通过全局安装vue-cli npm install --global vue-cli 在cmd中运行vue提示不是内部命令,原因是环境变量没有加上 找到npm的位置:(不在这个位置的全局搜索vue.cmd即可) C:\Users\Administrator\AppData\Roaming\npm 打开我的电脑-->右键属性-->高级系统设置-->环境变量-->Path-->添加获得npm的位置,保存,重启cmd命令工具即可

  • Java版超大整数阶乘算法代码详解-10,0000级

    Java版超大整数阶乘算法代码详解-10,0000级

    当计算超过20以上的阶乘时,阶乘的结果值往往会很大.一个很小的数字的阶乘结果就可能超过目前个人计算机的整数范围.如果需求很大的阶乘,比如1000以上完全无法用简单的递归方式去解决.在网上我看到很多用C.C++和C#写的一些关于大整数阶乘的算法,其中不乏经典但也有很多粗糙的文章.数组越界,一眼就可以看出程序本身无法运行.转载他人文章的时候,代码倒是仔细看看啊.唉,粗糙.过年了,在家闲来蛋疼,仔细分析分析,用Java实现了一个程序计算超大整数阶乘.思想取自网上,由我个人优化和改进. 这个方法采用"数

  • 5分钟学会Vue动画效果(小结)

    本文介绍了5分钟学会Vue动画效果(小结),分享给大家,具体如下: 1.哪些元素/那些组件适合在那些条件下实现动画效果 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单经典例子:(文字隐藏到显示效果) <div> <button @click="show = !show">show toggle</button> <transition name="fade"> //fade

  • 15分钟学会vue项目改造成SSR(小白教程)

    15分钟学会vue项目改造成SSR Ps:网上看了好多服务器渲染的例子,基本都是从0开始的,用Nuxt或者vue官网推荐的ssr方案(vue-server-renderer),但是我们在开发过程中基本上是已经有了现有的项目了,我们所要做的是对现有项目的SSR改造.那么这里,跟我一起对一个vue-cil2.0生成的项目进行SSR改造 关于这篇文章的案例源代码我放在我的github上面,有兴趣的同学,也可以去我的github查看我之前写的博客.博客 一.改造技术的分析对比. 一般来说,我们做seo有

  • 10分钟学会js处理json的常用方法

    10分钟学会js处理json的常用方法

    一.json定义 JSON ( JavaScript Object Notation) ,它是一串字符串 只不过元素会使用特定的符号标注. {} 双括号表示对象 [] 中括号表示数组 "" 双引号内是属性或值 : 冒号表示后者是前者的值(这个值可以是字符串.数字.也可以是另一个数组或对象) JSON 语法是 JavaScript 对象表示法语法的子集. 数据在名称/值对中.数据由逗号分隔.花括号保存对象.方括号保存数组 JSON 值可以是:数字(整数或浮点数).字符串(在双引号中).逻

  • 详解三分钟快速搭建分布式高可用的Redis集群

    这里的Redis集群指的是Redis Cluster,它是Redis在3.0版本正式推出的专用集群方案,有效地解决了Redis分布式方面的需求.当单机内存.并发.流量等遇到瓶颈的时候,可以采用这种Redis Cluster方案进行解决. 分区规则 Redis Cluster采用虚拟槽(slot)进行数据分区,即使用分散度良好的哈希函数把所有键映射到一个固定范围的整数集合里,这里的整数就是槽(slot).Redis Cluster槽的范围是0~16383,计算公式:slot=CRC16(key)

随机推荐