Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

slmyer

slmyer commented on Jun 27, 2019

@slmyer

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

zhaoling906

zhaoling906 commented on Oct 20, 2019

@zhaoling906

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

liuxiaoyang1

liuxiaoyang1 commented on Nov 19, 2019

@liuxiaoyang1

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

zhaoling906

zhaoling906 commented on Nov 27, 2019

@zhaoling906
lizaiya

lizaiya commented on Apr 20, 2020

@lizaiya

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

cherry728

cherry728 commented on Jun 16, 2020

@cherry728
  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) => {})
MyJingYi

MyJingYi commented on Jun 5, 2024

@MyJingYi

1、全局守卫: router.beforeEach
2、全局解析守卫: router.beforeResolve
3、全局后置钩子: router.afterEach
4、路由独享的守卫: beforeEnter
5、组件内的守卫: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@cherry728@lizaiya@slmyer@liuxiaoyang1

        Issue actions

          [vue] vue-router有哪几种导航钩子( 导航守卫 )? · Issue #415 · haizlin/fe-interview