本文主要跟大家介紹了vue滾動行為,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
滾動行為
什麼是路由的滾動行為
當切換到新路由時,想要頁面滾到頂部,或者是保持原先的捲動位置,就像重新載入頁面一樣
注意: 這個功能只在HTML5 history 模式下可用。在這個模式下我們需要啟動一個服務
我們用scrollBehavior 方法來做路由捲動
scrollBehavior 方法接收 to 和 from 路由物件。第三個參數savedPosition 當且僅當popstate 導航(透過瀏覽器的前進/後退按鈕觸發) 時才可用
下面我們做一個小案例來了解一下
##效果
#
<p id="app"> <h1>滚动行为</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滾動行為簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章!