Vue-router的滾動行爲

滾動行爲

使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像從新加載頁面那樣。 vue-router 能作到，並且更好，它讓你能夠自定義路由切換時頁面如何滾動。

注意，這個功能只能在history模式下啓用

var router=new VueRouter({
    routes:[],
    scrollBehavior(to,from,savedPosition){
        //return 滾動的位置
    }
})

scrollBehavior 方法接收 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (經過瀏覽器的 前進/後退 按鈕觸發) 時纔可用。

滾動位置的對象：

• {x:number,y:number}
• {selector:string}

例如：

scrollBehavior(to,from,savedPosition){
    return{x:number,y:number}
}

意思就是全部的路由導航，都會返回到頁面的頂部.

滾動到錨點：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

利用錨點行爲作一個小例子，一個藍色和紅色的P標籤做爲錨點，當點擊相應的連接時，頁面滾動到相應的錨點上：

HTML

<div id="app">
    <h1>滾動效果</h1>
    <ul class="ul">
        <li><router-link to="/">首頁</router-link></li>
        <li><router-link to="/nav">導航</router-link></li>
        <li><router-link to="/about">關於</router-link></li>
        <li><router-link to="/about#red">紅</router-link></li>
        <li><router-link to="/about#blue">藍</router-link></li>
    </ul>
    <br/>
    <router-view></router-view>
</div>

javascript

var Home = {
    template:"<div>home</div>"
}
var Foo = {
    template:"<div>nav</div>"
}
var Bar = {
    template:
        `
            <div>
                about
                <div style="height:200px;"></div>
                <p id="red" style="height:500px;background: red;color:#fff">紅色頁面</p>
                <p id="blue" style="height:300px;background: blue;color:#fff">藍色頁面</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:"/about",component:Bar
        }
    ]
});
var vm = new Vue({
    el:"#app",
    router
});

你們能夠把html部分和js部分複製到本身的編輯器中試一試