路由守卫

（1）、全局路由守卫的 信息页面配置

{    path: "/cart", //路径                                                                                                                           name: "Cart", // 路由别名 不是必填项 可以不写                                                                       component: Cart, // 要显示的页面组件                                                                                           meta:{                                                                                                                                                          needLogin:true, //是否需要守卫                                                                                                            title:'购物车', //菜单名字                                                                                                                        icon:'cart'   //图标   

            } 

},

（2）、全局守卫    （ index.js  里面有解构只需要修改一下就可以了 ）

to 目标路由    到哪去            from 当前路由  从哪来

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

                            console.log("全局守卫-to:",to) 

                            let {needLogin} = to.meta 

                            if(needLogin){    //判断 true 的页面需要进行守卫  门卫 是否需要上班                                if(!localStorage.isLogin){        //判断  有没有资格进入页面  未登录 进来   门卫看见你没带工牌 给我站住 登记        // 已经登录 不管          门卫看见你 带着有工牌 就不管了       

                            return `/login/?toPath=${to.fullPath}`   

} 

}})

export default router;

（3）、单个路由守卫

{    path: "/cart", //路径                                                                                                                                 name: "Cart", // 路由别名 不是必填项 可以不写                                                                             component: Cart, // 要显示的页面组件                                                                                   beforeEnter: (to, from, next) => {                                                                                                                     // 已登录 跳转到 购物车                                                                                                                         // 未登录 跳转到 登录界面                                                                                                                     // 登录状态如何表示                                                                                                                             // 登录状态 在哪获取                                                                                                                             // 登录界面 发起 登录请求 根据 返回的结果 来标记登录状态                      console.log(localStorage.isLogin, window.play);                                                                                 let {fullPath}  = to                                                                                                                                 if (localStorage.isLogin) {                                                                                                                       next();                                                                                                                                         }else {                                                                                                                                                       console.log(this) //undefined 因为这个时候 路由对象 vue实例还没创建                                               next(`/login/?toPath=${fullPath}`);                                                                                                       // this.$router.push("/login") 不能用                                                                                             }                                                                                                                                     console.log("要去哪 to:", to); // 目标路由信息                                                                 console.log("从哪来 from:", from); // 当前路由/从哪来路由信息                                                             console.log("next:", next); //下一步   

        }, 

},

（3）、组件级守卫

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫                                                                                               beforeRouteEnter (to, from, next) {                                                                                  // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例                                                                                       next(vm => {})                                                                                                }                                                                                                      beforeRouteUpdate (to, from, next) {                                                                             // 同一页面，刷新不同数据时调用，                                                                 }                                                                                                    beforeRouteLeave (to, from, next) {                                                                             // 离开当前路由页面时调用                                                                                   }