Vue 的路由钩子函数/路由守卫有哪些

全局前置守卫

o 当一个导航触发时，全局前置守卫(在进入组件之前)按照创建顺序调用。
o vue-router 提供的 router.beforeEach（(to，from，next)=>{}）可以方便地
实现全局前置导航守卫
to：即将要进入的目标路由对象
from:当前导航正要离开的路由
next:下一步执行

router.beforeEach((to,from,next)=>{
//根据用户的登录状态限制用户是否能跳转到首页面
if(to.path=="/login"||to.path=="/register"){
next()
} else {
alert("当前为付费页面请登录后访问！")
next("/login")
}})

全局后置钩子

o 当一个导航触发时，全局后置钩子(在进入组件之后)调用。
o vue-router 提供的 router.afterEach((to,from)=>{})实现全局后置守卫
o to：即将要进入的目标路由对象
o from:当前导航正要离开的路由

router.afterEach((to,from)=>{
console.log("我是全局后置钩子");
})

路由独享的守卫

o 与全局前置守卫相比路由独享守卫只是对当前路由进行单一控制参数和全局
前置守卫相同
o 在路由配置上直接定义 beforeEnter 进行路由独享守卫定义

{
path:'/shop',
name:'Shop',
component:Shop,
beforeEnter:(to,from,next)=>{
//判断是否登录过
alert("当前页面是 vip 页面！请登录")
next("/login")
}}

组件内的守卫（只对当前组件生效）

o beforeRouteEnter 在进入组件前调用（不常用）
o 在组件中使用 beforeRouteEnter(to,from,next){}来进行进入组建前的钩子
o beforeRouteLeave 离开路由之前（常用）
o 在组件中使用 beforeRouteLeave(to,from,next){}来进行离开组件的钩子

beforeRouteLeave(to,from,next){
if(confirm("你确定要离开吗")){
next()
}else{
//不进行下一步（也就是不从当前路由离开）
next(false)
}}