在文件頁面(http://localhost:8080/document)拉動滾動條，然後重新整理瀏覽器會發現滾動條依然在原來的位置，這是瀏覽器的預設行為，會記錄瀏覽器滾動條預設位置。

        但是點選瀏覽器“前進/後退”按鈕，會發現當初那個頁面的滾動條從0開始了，沒有記錄上一次滾動條的位置。現在要求點選瀏覽器“前進/後退”按鈕，頁面滾動條要記錄上一次的位置，這時需要設定它的的滾動行為。

        這時候需要在路由配置中設定 scrollBehavior(to,from,savePosition)函式，函式有三個引數。scrollBehavior() 函式在點選瀏覽器的“前進/後退”，或者切換導航的時候觸發。

scrollBehavior(to,from,savePosition){ // 在點選瀏覽器的“前進/後退”，或者切換導航的時候觸發。
    console.log(to) // to：要進入的目標路由物件，到哪裡去
    console.log(from) // from：離開的路由物件，哪裡來
    console.log(savePosition) // savePosition：會記錄滾動條的座標，點選前進/後退的時候記錄值{x:?,y:?}
  }

        實現滾動行為的程式碼：router/index.js

let router = new VueRouter({
  mode:'history'
 
,//預設是hash模式
  linkActiveClass:'menvscode-active',
  scrollBehavior(to,from,savePosition){ // 在點選瀏覽器的“前進/後退”，或者切換導航的時候觸發。
    console.log(to) // to：要進入的目標路由物件，到哪裡去
    console.log(from) // from：離開的路由物件，哪裡來
    console.log(savePosition) // savePosition：會記錄滾動條的座標，點選前進/後退的時候記錄值{x:?,y:?}
    if(savePosition) {
      return
 
 savePosition;
    }else{
      return {x:0,y:0}
    }
  },
  routes:[
    {
      path:'/',
      name:'index',
      component:Home,
    },
    {
      path:'/home',
      name:'Home',//name代表當前的路由
      component:Home,
      alias:'/index' //當訪問'/index'的時候，就能匹配到當前的路由了。
    },
    {
      path:'/document',
      name:'Document',
      components:{ // 多個檢視的時候，預設渲染default的檢視。
        default:Document,
        slider:Slider,
        home:Home
      }
    }
  ]
})

export default router

        我們還可以設hash來控制滾動行為，定位到某一位置

if(to.hash){ //先判斷目標路由有沒有hash值
    return {selector:to.hash}
}

App.vue：在路勁後面新增 hash 值。

<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> <!-- 命名檢視 -->
      <router-view class="center"></router-view>
    </div>
  </div>
</template>

@/components/Document.vue

<template>
    <div>
        我是文件
        <p id="abc">定位到這個元素</p>
    </div>
</template>

router/index.js

let router = new VueRouter({
  mode:'history',//預設是hash模式
  linkActiveClass:'menvscode-active',
  scrollBehavior(to,from,savePosition){ // 在點選瀏覽器的“前進/後退”，或者切換導航的時候觸發。
    console.log(to) // to：要進入的目標路由物件，到哪裡去
    console.log(from) // from：離開的路由物件，哪裡來
    console.log(savePosition) // savePosition：會記錄滾動條的座標，點選前進/後退的時候記錄值{x:?,y:?}
    /*if(savePosition) {
      return savePosition;
    }else{
      return {x:0,y:0}
    }*/
    if(to.hash){ //先判斷目標路由有沒有hash值
      return {selector:to.hash}
    }
  },
  routes:[]
})

export default router