滚动加载_vuerouter 的滚动行为和懒加载功能【36】

学习要点：1.滚动行为 2.懒加载

本节课我们来开始了解 Vue router 的滚动行为和懒加载功能。

一．滚动行为

1.滚动行为，即当我们跳转到新路由组件时，在有足够高度的情况下会记住当前位置；

2. 有时，我们不需要记住当前位置，直接让它 top，或者指定位置；

const router = new VueRouter({  mode : 'history',  routes,  scrollBehavior(to, from) {    return { x: 0, y: 0 }  }})

PS：当我们进入新路由组件时，会自动 top；当然，还支持前进/后退模式以及返回异步；

scrollBehavior (to, from, savedPosition) {  if (savedPosition) {    return savedPosition //保存之前的位置  } else {    return { x: 0, y: 0 }  }}

二．路由懒加载

1. 路由懒加载：即当加载这个路由的时候再加载这个组件，提高运行的效率；

{  path: '/about',  name: 'About',  component: () => import('../views/About.vue')}

2. 用@代替..路径：

component: () => import('@/views/About.vue')

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！