（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) { // 离开当前路由页面时调用 }
网友评论