Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] vue-router钩子函数有哪些?都有哪些参数? #368

Open
haizhilin2013 opened this issue Jun 20, 2019 · 5 comments
Open

[vue] vue-router钩子函数有哪些?都有哪些参数? #368

haizhilin2013 opened this issue Jun 20, 2019 · 5 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] vue-router钩子函数有哪些?都有哪些参数?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 20, 2019
@guozi9476
Copy link

beforeEach,afterEach
beforeEach主要有三个参数,to,form,next

@zlqGitHub
Copy link

全局的:beforeEach、beforeResolve、afterEach
路由的:beforeEnter
组件的:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
参数:to、from、next;正对不同的钩子函数参数有所差异。

@eavan5
Copy link

eavan5 commented Apr 6, 2020

全局的:beforeEach、beforeResolve、afterEach
路由的:beforeEnter
组件的:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
参数:to、from、next;正对不同的钩子函数参数有所差异。

afterEach没有next

@WenJieLi1998
Copy link

1.全局:
前置守卫:beforeEach((to, from, next)=>{
to:即将进入的路由对象
form:当前导航正要离开的路由
next():进行管道中的下一个钩子
})
解析守卫:beforeResolve((to, from, next)=>{})
后置钩子:afterEach((to,form)=>{})

路由:beforeEnter((to, from, next)=>{})

组件:
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 this
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 this
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 this
}

@yxllovewq
Copy link

按跳转时触发的导航守卫顺序:

  1. beforeRouteLeave
  2. beforeEach
  3. beforeRouteUpdate
  4. beforeEnter
  5. beforeRouteEnter
  6. beforeResolve
  7. afterEach

beforeRouteUpdate、beforeRouteLeave中可以通过this访问组件实例子
beforeRouteEnter可以通过next的回调参数vm访问到组件实例

afterEach没有next

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

6 participants