导航守卫,也叫路由守卫,路由的前置验证
路由守卫, 类似于一个前置的操作
- 全局路由守卫
index.jsrouter.beforeEach((to,from,next)=>{if(to.path=='/login'){next()}else{next('/login')}
})/全局路由守卫
router.beforeEach((to,from,next)=>{// 演示效果,点击商品/goods跳到到用户中心/user/pay,点击其他正常// 做登陆功能的话, 如果用户没有登录,跳到登陆界面,登录了的话,继续走下一步// 这是全局的,所有的路由都要进行这个验证if(to.path=='/goods'){next('/user/pay')}else{next()}
})
- 组件内守卫
export default{beforeRouteEnter:function(to,from,next){if(false){next()}else{next('/login')}}
}<script>export default{beforeRouteEnter:function(to,from,next){if(to.path=='/user/pay'){next('/login')}else{next()}}}
</script>
参考
https://gitee.com/zenglingchuan/test_vue