前端学习vue.js之路由守卫

1、什么是路由守卫？

路由守卫也叫路由钩子函数，它是在路由跳转过程中调用的函数，通过路由守卫可获取路由信息和阻止路由跳转

2、有哪些路由守卫

路由守卫有以下三种:
组件内的路由守卫:  beforeRouteEnter()  beforeRouterUpdate()  beforeRouteLeave() 
全局路由守卫: beforeEach()    afterEach() 
单个路由守卫:  beforeEnter() 

3、路由守卫有哪些参数，作用是什么？

路由守卫的参数有三个: to, from , next
to: 表示路由跳转的目标信息对象 (到哪儿去)
from: 表示路由跳转的来源信息对象(从哪儿来)
next: 回调函数, 表示是否允许路由跳转, 调用允许, 不调用则禁止

 

 

4、什么时候用路由守卫?  

beforeRouteEnter,  beforeEnter, beforeEach, 这三个都是路由进入之前的守卫,  这些路由守卫常用于做登录认证, 在这里判断用户是否已经登录, 如果已经登录,调用next()允许进入, 如果没有登录, 不调用next(),禁止进入   主要针对一些需要登录状态才能访问的页面, 如: 个人信息页

beforeRouteLeave  是路由离开之前的守卫, 在一些表单页面, 在这个函数中提示, 离开页面, 填写的表单信息会丢失    如: 在线测试页面, 测试提交之前, 不允许离开这一页

beforeRouteUpdate 是路由更新时调用的钩子函数, 当路由路径来源和目标相同(当前页跳转当前页),并且参数不同时, 会调用这个钩子,  常用于搜索页,