路由守卫、图片懒加载、路由懒加载

路由守卫

路由导航守卫的理解
        当路由跳转的时候，这个守卫可以去拦住，检测你是否有去往这个页面的条件
        有特定条件才能去到相应的页面的功能  
        拦截路由，查看是否满足条件，满足的放行，不满足的处理

全局导航守卫： 
        无论是从哪个页面往哪个页面跳转，只要有路由跳转，就会拦住，进行检测

        
        前置守卫   配置的比较靠前       匹配路由前拦截，用的最多     
        解析守卫   配置的位置中间       匹配路由中拦截，用的比较少
        后置守卫   配置的比较靠后       匹配路由完成拦截，用的比较少

路由独享守卫：

        只能去拦住固定的往某个页面跳转的，是配置在当前路由当中，时间比较靠前
        

组件内守卫：    

        只能去拦住固定的往某个页面跳转的，是配置在组件内部，也就是路由匹配已经完成了，时间比较靠后

        就是解析完了，已经跳转到组件的时候，但是组件还没创建成功的时候拦截

router.beforeEach(async(to, from, next) => {

  //to      目的地路由对象

  //from    出发地路由对象

  //next是一个函数，代表处理手段

  //使用next

  // 1、next() 不加任何参数  代表无条件放行

  // 2、next(false) 不做任何处理，卡在原地

  // 3、next(路由对象或者路径) 代表强制跳转到这个地方

})

图片懒加载

   (1)还没有加载得到目标图片时, 先显示loading图片

   (2)在<img>进入可视范围才加载请求目标图片

路由懒加载

 import xxx from xxx 代表同步引入或者叫静态引入，这种引入方式，webpack会把所有的
 引入的模块一起打包，打包到一个大的文件当中，而且这种引入方式只能写在文件的最上面
 不能随便写，不能什么使用什么时候引

 import() 函数，这个称作叫异步引入或者动态引入，它可以什么时候用什么时候引。一旦使用
 的是import函数引入模块，webpack会把引入的模块进行单独打包，后期当我们第一次访问哪个
 路由组件的时候，才会真正的去加载对应的哪个打包好的组件文件
 import异步加载 返回的是promise

调用import函数把一次性打包的所有路由组件分开去打包加载  

路由懒加载特点
    每个路由组件打包会打包成一个单独的文件
    第一次访问哪一个路由组件，再去加载哪一个打包好的文件

    (1）当打包构建应用时，JS包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

    (2)    本质就是Vue 的异步组件在路由组件上的应用

    (3)    需要使用动态import语法, 也就是import()函数

    (4)    import('模块路径'): webpack会对被引入的模块单独打包一个小文件

    (5)     当第一次访问某个路径对应的组件时，此时才会调用import函数去加载对应的js打包文件