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

 更新时间:2017年09月21日 14:28:28   作者:Besmall  
本篇文章主要介绍了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

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

相关文章

  • 浅析一下Vue3的响应式原理

    浅析一下Vue3的响应式原理

    这篇文章主要通过示例和大家一起浅析一下Vue3的响应式原理,文中的示例代码讲解详细,对我们学习Vue3有一定帮助,需要的可以参考一下
    2022-08-08
  • Vue向下滚动加载更多数据scroll案例详解

    Vue向下滚动加载更多数据scroll案例详解

    这篇文章主要介绍了Vue向下滚动加载更多数据scroll案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • antd table按表格里的日期去排序操作

    antd table按表格里的日期去排序操作

    这篇文章主要介绍了antd table按表格里的日期去排序操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3+ts深入组件Props实例详解

    vue3+ts深入组件Props实例详解

    Props是组件之间进行数据传递的一种方式,可以将数据从父组件传递给子组件,这篇文章主要介绍了vue3+ts深入组件Props的实例详解,需要的朋友可以参考下
    2023-09-09
  • 详解基于vue-cli优化的webpack配置

    详解基于vue-cli优化的webpack配置

    本篇文章主要介绍了详解基于vue-cli优化的webpack配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue表格组件Vxe-table使用技巧总结

    Vue表格组件Vxe-table使用技巧总结

    这篇文章主要给大家介绍了关于Vue表格组件Vxe-table使用技巧的相关资料,文中还介绍了VXEtable展示指定行所遇到得问题,对大家学习或者使用Vxe-table具有一定的参考学习价值,需要的朋友可以参考下
    2022-09-09
  • vue+axios 前端实现的常用拦截的代码示例

    vue+axios 前端实现的常用拦截的代码示例

    这篇文章主要介绍了vue+axios 前端实现的常用拦截的代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue3状态管理之Pinia的入门使用教程

    Vue3状态管理之Pinia的入门使用教程

    Pinia是Vue.js的轻量级状态管理库,比起vue3中的Vuex状态管理,pinia更轻量,更容易使用,下面这篇文章主要给大家介绍了关于Vue3状态管理之Pinia的入门使用教程,需要的朋友可以参考下
    2022-04-04
  • 如何给element添加一个抽屉组件的方法步骤

    如何给element添加一个抽屉组件的方法步骤

    这篇文章主要介绍了如何给element添加一个抽屉组件的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 详解Vue 2中的  initState 状态初始化

    详解Vue 2中的  initState 状态初始化

    这篇文章主要介绍了详解Vue 2中的initState状态初始化,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08

最新评论