Vue-Router有哪几种路由守卫?

98 阅读1分钟

什么是路由呢?

路由其实是一种映射关系。 生活中的路由:设备和ip的映射关系; node.js路由:接口和服务的 映射关系; (前端)Vue中的路由:路径和组件的映射关系。

什么是路由守卫?

路由守卫又称导航守卫,指是路由跳转前、中、后过程中的一些钩子函数。官方解释是vue-router提供的导航守卫,要通过跳转或取消的方式来守卫导航。路由守卫分为三种,全局路由、组件内路由,路由独享

一,全局守卫

全局路由钩子函数有:beforeEach、beforeResolve、afterEach(参数中没有next)

前置路由守卫:router.beforeEach((to,from,next)=>{})

回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。

后置路由守卫:router.afterEach((to,from)=>{})

后置守卫只有两个参数,to:进入到哪个路由去,from:从哪个路由离

二,组件内路由

组件内路由的钩子函数有:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

三,路由独享

路由独享的钩子函数有:beforeEnter