diy小程序开发平台_详解10分钟学会vue滚动行为

阅读  ·  发布日期 2021-01-11 14:15  ·  admin
详解10分钟学会vue滚动行为       本篇文章主要介绍了vue滚动行为,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

什么是路由的滚动行为

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

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

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

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

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

效果

 div id="app" 
 h1 滚动行为 /h1 
 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 
 div /div 
 p id="an1" 红色页面 /p 
 p id="an2" 蓝色页面 /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滚动小案例



以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。