路由懒加载
懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
路由模式
hash模式原理:调用window.onhashchange方法hash值的切换
history模式原理:本质使用H5的histroy.pushState方法来更改url
hash与history的区别
-
hash模式较丑,history模式较优雅
-
hash兼容IE8以上,history兼容IE10以上
-
history模式需要后端配合将所有访问都指向index.html,否则用户刷新页面,会导致404错误
路由守卫
在某些情况下,当路由跳转前或跳转后、进入、离开某一个路由前、后,需要做某些操作,就可以使用路由钩子来监听路由的变化
会在任意路由跳转前执行,next一定要记着执行,不然路由不能跳转了
(1)全局路由守卫:
router.beforeEach:全局的前置路由守卫,路由跳转之前就会执行
router.afterEach:全局的后置路由守卫,路由跳转之后(就我不需要next)
(2)单个路由守卫:
before.Enter:进入到路由之前
(3)组件路由守卫:
beforeRouteEnter:还没有进入到,访问不到实例
beforeRouteUpdate:配置详情页,路由组件再被切换的时候且组件被复用 这个钩子就会执行
beforeRouteLeave:从组件出来,可以访问到实例了、