Vue3路由守卫的理解

官网:导航守卫 | Vue Router

目录

1.路由类型

1.1导航守卫

 1.2路由独享

1.3组件内守卫 

2.路由元信息

1.路由类型

1.1导航守卫

 全局 :所有路由都会触发

        router.beforeEach((to,from,next)=>{})

        router.afterEach((to,form,next)=>{})

 1.2路由独享

路由表中的组件

        beforeEnter((to,form,next)=>{})

1.3组件内守卫 

单独组件中

        beforeRouteEnter((to,from,next)=>{})

        beforeRouteUpdate((to,form,next)=>{})

        beforeRouteLeave((to,form,next)=>{})

三个参数表示，(去哪里，从哪来，下一个执行结点)，前两个是变量，后一个是方法。

补充:

1）对于数据的获取可以从，1.导航完成之后通过声明周期钩子，2.在导航完成之前

2）

2.路由元信息

将任意信息附加到路由上，权限  meta:{auth:true} 可以通过route.meata.auth进行获取到

在vue3+ts中可以对meta进行泛型的扩充

route 获取路由信息--route.params

router 路由调用方法--router.push