php vue 小案例,vue滚动行为实例分析

本文主要和大家介绍vue滚动行为，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

滚动行为

什么是路由的滚动行为

当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样

注意: 这个功能只在 HTML5 history 模式下可用。在这个模式下我们需要启动一个服务

我们用scrollBehavior 方法来做路由滚动

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用

下面我们做一个小案例来了解一下

效果

滚动行为

• 首页
• 导航
• 关于
• 红色页面
• 蓝色页面

var Home = {

template:"

home

"

}

var Foo = {

template:"

foo

"

}

var Bar = {

template:

`

bar

红色页面

蓝色页面

`

}

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

});

vue滚动小案例

相关推荐：