Setting scroll behavior in vue routing

On the document page ( http://localhost:8080/document ) Pull the scrollbar and refresh the browser to find that the scrollbar is still in its original position. This is the default behavior of the browser and records the default position of the browser scrollbar.

However, by clicking on the browser Forward/Back button, you will find that the scrollbar on that page started at 0 and did not record the position of the last scrollbar.Now you need to click the browser Forward/Back button, and the page scrollbar will record the last position, so you need to set its scrolling behavior.

The scrollBehavior(to,from,savePosition) function, which has three parameters, needs to be set in the routing configuration at this time.The scrollBehavior() function is triggered when the browser clicks Forward/Back, or when the navigation is switched.

scrollBehavior(to,from,savePosition){ // Triggered when the browser clicks Forward/Back or switches navigation.
    console.log(to) // To: To: To which route object to enter, where to go
    console.log(from) // from: the route object to leave, where to come
    console.log(savePosition) // savePosition: Records the coordinates of the scrollbar, and records the value {x:?,y:?} when you click forward/backward.
  }


Code to implement scrolling behavior: router/index.js

let router = new VueRouter({
  mode:'history',//The default is hash mode
  linkActiveClass:'menvscode-active',
  scrollBehavior(to,from,savePosition){ // Triggered when the browser clicks Forward/Back or switches navigation.
    console.log(to) // To: To: To which route object to enter, where to go
    console.log(from) // from: the route object to leave, where to come
    console.log(savePosition) // savePosition: Records the coordinates of the scrollbar, and records the value {x:?,y:?} when you click forward/backward.
    if(savePosition) {
      return savePosition;
    }else{
      return {x:0,y:0}
    }
  },
  routes:[
    {
      path:'/',
      name:'index',
      component:Home,
    },
    {
      path:'/home',
      name:'Home',//name represents the current route
      component:Home,
      alias:'/index' //When'/index'is accessed, it matches the current route.
    },
    {
      path:'/document',
      name:'Document',
      components:{ // When multiple views are present, the default view is rendered by default.
        default:Document,
        slider:Slider,
        home:Home
      }
    }
  ]
})

export default router


* We can also set hash to control scrolling behavior and locate a location

if(to.hash){ //First determine if the target route has a hash value
    return {selector:to.hash}
}

App.vue: Add a hash value behind the road.

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li>
          <router-link to="/" exact tag="div"  event="mouseover">home</router-link>
        </li>
        <li>
          <router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link>
        </li>
        <router-link to="/about" tag="li" event="mouseover">
          <i></i>
          <span>about</span>
        </router-link>
      </ul>
    </div>
    <div class="content f-cb">
      <router-view name="slider"></router-view> <!-- Named View -->
      <router-view class="center"></router-view>
    </div>
  </div>
</template>

@/components/Document.vue

<template>
    <div>
        I am a document
        <p id="abc">Locate this element </p>
    </div>
</template>

router/index.js

let router = new VueRouter({
  mode:'history',//The default is hash mode
  linkActiveClass:'menvscode-active',
  scrollBehavior(to,from,savePosition){ // Triggered when the browser clicks Forward/Back or switches navigation.
    console.log(to) // To: To: To which route object to enter, where to go
    console.log(from) // from: the route object to leave, where to come
    console.log(savePosition) // savePosition: Records the coordinates of the scrollbar, and records the value {x:?,y:?} when you click forward/backward.
    /*if(savePosition) {
      return savePosition;
    }else{
      return {x:0,y:0}
    }*/
    if(to.hash){ //First determine if the target route has a hash value
      return {selector:to.hash}
    }
  },
  routes:[]
})

export default router

Tags: Vue

Posted on Fri, 06 Mar 2020 08:08:27 -0800 by naitsir