路由懒加载及路由守卫

## 路由懒加载

 component:()=> import("./路径")  

 它可以按需引入 可以优化vue项目加载速度

 ## 路由守卫

 路由守卫就是路由钩子函数     

路由守卫使用场景：

登录，刚进来会用到全局前置、购物车结算，结算时要判断用户是否登录，没登陆则跳转至登录

 路由守卫分为三种：

 1. 全局钩子：  通常写在router.js文件router实例之后

 1）beforeEach    全局前置钩子函数 当路由进入之前调用

 参数1 to 表示即将进入的目标路由对象 参数2 from 表示从那个路由对象跳转过来的 参数3 next 下一步执行函数

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

        console.log(to);

        console.log(from);

        next();

    })

 2）afterEach  全局后置钩子函数 当路由进入之后调用  只有两个参数

 参数1 to 表示即将进入的目标路由对象 参数2 from 表示从那个路由对象跳转过来的

    router.afterEach((to,from)=>{

        console.log(to);

        console.log(from);

        next();

    })

 2. 单个路由里面的守卫：

    beforeEnter:(to,from,next)={

    }

    一般写在单个路由路由对象的compontent属性之后 

    访问这个路由之前调用 访问其他路由不调用

 eg:

 {

     name:"",

     path:"",

     component:()=> import("./路径"),

     beforeEnter:(to,from,next)={

 }

 }

 3. 组件独享守卫：写在组件的script中 当访问路径渲染组件的时候触发

 1）在进入组件之前调用：

 beforeRouteEnter(to,from,next){

 }

 2）当前路由路由改变，但是该组件被复用时调用

 befroeRouteUpdate(to,from,next){

 }

 3）路由离开该组件时调用

 beforeRouteLeave(to,from,next){

 }