什么是路由守卫?vue-router有哪几种路由守卫?
什么是路由呢?路由其实是一种映射关系。生活中的路由:设备和ip的映射关系;node.js路由:接口和服务的映射关系;(前端)Vue中的路由:路径和组件的映射关系。路由守卫的使用场景?首先,如何给路由添加一个权限判断呢?例如,用户在登录的状态下就能去到某页面,但是未登录则给你弹出一个未登录的提示。路由守卫的目标是实现这样一个权限判断,在路由跳转之前,会触发一个函数.//语法:router.befor
什么是路由呢?
路由其实是一种映射关系。
生活中的路由:设备和ip的映射关系;
node.js路由:接口和服务的 映射关系;
(前端)Vue中的路由:路径和组件的映射关系。
路由守卫的使用场景?
首先,如何给路由添加一个权限判断呢?例如,用户在登录的状态下就能去到某页面,但是未登录则给你弹出一个未登录的提示。
路由守卫的目标是实现这样一个权限判断,在路由跳转之前,会触发一个函数.
//语法:router.beforeEach((to,from,next) => {}
let isLogin = false; //未登录
router.beforeEach((to,from,next) => {
//路由跳转“之前”先执行这里,决定是否跳转
if (to.path === '/yourLogin' && isLogin === false) {
alert("请登录”)
next(false) //阻止路由跳转
}else {
next() //正常放行
}
})
参数1(to):要跳转到的路由(路由对象信息)目标
参数2(from):从哪里跳转的路由 (路由对象信息)来源
参数3 (next):函数体 必须要next()才会让路由正常地跳转和切换,next(false)在原地停留,next(“强制修改到另一个路由路径上”
注意:如果不调用next,那么页面会留在原地
全局路由在真正跳转之前,会执行一次beforeEach函数,next调用则跳转,也可以强制修改要跳转的路由。
什么是路由守卫呢?
如果在面试中被问到了这个,比较完美的答案如下:
路由守卫又称导航守卫,指是路由跳转前、中、后过程中的一些钩子函数。官方解释是vue-router提供的导航守卫,要通过跳转或取消的方式来守卫导航。路由守卫分为三种,全局路由、组件内路由,路由独享。
全局路由钩子函数有:beforeEach、beforeResolve、afterEach(参数中没有next)
组件内路由的钩子函数有:beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave
路由独享的钩子函数有:beforeEnter
更多推荐
所有评论(0)