Vue 路由 控制滚动行为

  1. 作用:控制当前展示组件内容的具体位置
  2. scrollBehavior(to,from,savedPosition){}
  3. 在main.js当中的,router路由实例化对象中实现。
    4.return {x:xxx,y:xxx};将页面移动到某个坐标位置
const router = new VueRouter({
  routes,
  mode:"history",
  scrollBehavior(to,from,savedPosition){
     return {x:0,y:100}
  }
})

5.return{ selector: string} 移动到某个元素点

const router = new VueRouter({
  routes,
  mode:"history",
  scrollBehavior(to,from,savedPosition){
     return {selector:'.btn'}
  }
})

6.scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。比如,翻滚某一页面到某给位置,然后跳转到了其他页面,点击back按钮时,再次回到上一页面的浏览位置。

const router = new VueRouter({
  routes,
  mode:"history",
  scrollBehavior(to,from,savedPosition){
    if(savedPosition){
      return savedPosition;
    }else{
      return {x:0,y:0}
    }
  }
})
翻滚到某一位置,然后去往别的页面

点击back再次回来

回来还是原来的浏览位置
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 又一位大师离世,2018是一个悲伤之年。 “飞雪连天射白鹿,笑书神侠倚碧鸳”。 还记得我上中学时,偷偷看姐姐带回来...
    叮当_梦阅读 124评论 0 0
  • 姓名:汤晶 公司:常州新日催化剂有限公司 【日精进打卡第84天】 【知~学习】 《六项精进》0遍 共202遍 ...
    晶晶_7485阅读 75评论 0 0
  • 文/长木云伊 写下这个题目真的有点儿令我感到亲切。从高中时就一直陪着我的“失眠”此刻依然在跟我亲密交谈,象一个老朋...
    莫嗔堂堂主阅读 320评论 0 0
  • 2018.06.01.星期五,天气晴 今天是六一儿童节,孩子们的节日,大宝今天早上七点到校,可不到六点就听见...
    任昱丞妈妈阅读 237评论 0 2
  • 明露家境不好,从小都是在苦日子里度过的,她在这样贫穷的日子里奋斗地生活着,丝毫不抱怨,帮衬着家里,协助母亲,带好弟...
    陌上风存阅读 176评论 0 0