滾動行為

什么是路由的滾動行為

當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣

注意: 這個功能只在 HTML5 history 模式下可用。在這個模式下我們需要啟動一個服務

我們用scrollBehavior 方法來做路由滾動

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

下面我們做一個小案例來了解一下

效果

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

vue滾動小案例

https://github.com/Besmall/vu...

https://Besmall.github.io/vue...

總結

以上是生活随笔為你收集整理的10分钟学会vue滚动行为的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。