Vue scrolling behavior example analysis

This article mainly introduces the scrolling behavior of vue to you. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Scrolling behavior

What is the scrolling behavior of routing

When switching to a new route, do you want the page to scroll to top, or maintain the original scroll position, just like reloading the page

Note: This feature is only available in HTML5 history mode. In this mode we need to start a service

We use the scrollBehavior method to do routing scrolling

The scrollBehavior method receives to and from routing objects. The third parameter savedPosition is available when and only if popstate navigation (triggered by the browser's forward/back button)

Let's do a small case to understand

The effect

<p id="app">
  <h1 id="滚动行为">滚动行为</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>
</p>
<script>
  var Home = {
    template:"<p>home</p>"
  }
  var Foo = {
    template:"<p>foo</p>"
  }
  var Bar = {
    template:
      `
        <p>
          bar
          <p style="height:500px;background: yellow;"></p>
          <p id="an1" style="height:500px;background: red;">红色页面</p>
          <p id="an2" style="height:300px;background: blue;">蓝色页面</p>
        </p>
      `
  }

  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 rolling small case

Related recommendations:

Detailed explanation of vue scroll axis plug-in better-scroll

The above is the detailed content of Vue scrolling behavior example analysis. For more information, please follow other related articles on the PHP Chinese website!