vue路由中设置滚动行为(scrollBehavior)

责编:menVScode 2017-12-02 10:39 阅读(877)

        在文档页面(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:?}
  }

QQ截图20171204104952

        实现滚动行为的代码: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
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码