vue-cli学习-路由滚动和懒加载

滚动行为

滚动行为，即当跳转到新路由组件时，在有足够高度的情况下会记住当前位置
有时，不需要记住当前位置，直接让它 top，或者指定位位置

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

//当我们进入新路由组件时，会自动 top；当然，还支持前进/后退模式以及返回异步
scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
        return savedPosition //保存之前的位置
    } else {
        return { x: 0, y: 0 }
    }
}

路由懒加载

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

{
    path: '/about',
    name: 'About',
//    component: () => import('../views/About.vue')
//    使用@代替..
    component: () => import('@/views/About.vue')
}