vue的全局守卫分为:前置守卫、后置钩子函数
1、前置守卫:router.beforeEach
这里举一个小例子:
先写一个简单的登录页面
点击登录按钮,把input的内容当作密码,传到vuex里,
在vuex里用list接收传过来的密码,只有输入密码才能登录,
然后用到全局守卫的前置守卫:
它有三个参数,分别是:to --去哪里
from--从哪来
next--下一步(放不放行)
因为要登录才能访问其他页面,所以在守卫里判断,有没有输入密码,因为是全局守卫,所以还要判断有没有在登录页面,如果没有输入密码以及没有在登录页面,就在next下一步里写登录页面的路径,进入登录页面
输入密码后并且在登录页面,就可以进入其他页面,next下一步就可以放行了,next里就写想进入的页面,
然后再执行下一步操作
2、后置钩子函数 :router.afterEach
router.afterEach((to,from,next)=>{
console.log(to)
console.log(from)
console.log(next) })
可以看到后置钩子函数是没有next参数的