Navigation Menu

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有哪几种导航钩子( 导航守卫 )? #415

Open
haizhilin2013 opened this issue Jun 22, 2019 · 7 comments
Open
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] vue-router有哪几种导航钩子( 导航守卫 )?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 22, 2019
@slmyer
Copy link

slmyer commented Jun 27, 2019

3种,全局的、组件的、单个路由独享的

@zhaoling906
Copy link

三种导航钩子:
1.全局导航钩子:router.beforeEach(to,from,next) 作用:跳转前进行判断拦截
2.组件内的钩子
3.单独路由独享组件

@liuxiaoyang1
Copy link

共有三种守卫:
1:全局守卫:beforeEach,afterEach
2:路由独享守卫:beforeEnter
3:组件级别的守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
他们执行顺序:全局》路由》组件
除了afterEach全局后置外,其他的守卫中务必要调用next(),否则无法完成导航
还有注意全局前置守卫可以用来进行拦截,(登录拦截)

@LQY-3777
Copy link

@zhaoling906
Copy link

zhaoling906 commented Nov 27, 2019 via email

@lizaiya
Copy link

lizaiya commented Apr 20, 2020

还有一个缓存组件keep-alive的钩子,activated 每次切换回来的时候会触发,deactivated 每次离开的时候触发

@cherry728
Copy link

  1. 全局:
    beforeEach((to, from, next) => {调用next来resolve这个钩子} ),
    beforeResolve((to, from, next) => {} ),
    afterEach((to, from) => {} )
  2. 路由独享:
    beforeEnter((to, from, next) => {} ),
  3. 组件内部:
    beforeRouteEnter((to, from, next) => {next可以传回调,回调里面可以用vm访问实例} ), 内部没有this,因为路由还没confirm
    beforeRouteUpdate((to, from, next) => {}),可以拿到this
    beforeRouteLeave((to, from, 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

7 participants