-
全局路由
-
全局前置守卫:beforeEach
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
每个守卫方法接收三个参数:
to: Route
: 即将要进入的目标 路由对象from: Route
: 当前导航正要离开的路由next: Function
: 一定要调用该方法不然会阻塞路由。执行效果依赖next
方法的调用参数。
next()方法接收的参数:
next()
: 进行管道中的下一个钩子。next(false)
: 中断当前的导航。回到到from
路由对应的地址。next('/')
或者next({ path: '/' })
: 跳转到一个不同的地址。next(error)
: 导航终止,且该错误会被传递给router.onError()
注册过的回调。
-
全局后置钩子:afterEach
router.afterEach((to, from) => { // do someting });
注意:不同于前置守卫,后置钩子并没有 next 函数,也不会改变导航本身。
-
-
路由独享的钩子
即单个路由独享的导航钩子,它是在路由配置上直接进行定义的,参数的使用,和全局前置守卫是一样的。
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
-
组件内的导航钩子
- beforeRouteEnter:在渲染该组件的对应路由被 confirm 前调用
- beforeRouteUpdate:在当前路由改变,但是该组件被复用时调用
- beforeRouteLeave:导航离开该组件的对应路由时调用
三者参数都与全局前置守卫一样
注意:beforeRouteEnter 不能获取组件实例 this,因为当守卫执行前,组件实例被没有被创建出来,剩下两个钩子则可以正常获取组件实例 this
vue-router有几种钩子函数?具体是什么及其参数
最新推荐文章于 2024-07-29 16:25:11 发布