Fe-interview: [vue] vue-router有哪几种导航钩子（ 导航守卫 ）？

[haizhilin2013]

[vue] vue-router有哪几种导航钩子（ 导航守卫 ）？

[slmyer]

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

[zhaoling906]

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

[liuxiaoyang1]

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

[LQY-3777]

ickt-5:
https://www.cnblogs.com/kzxiaotan/p/11676872.html

[zhaoling906]

???什么意思

------------------ 原始邮件 ------------------
发件人: "LQY-3777"<[email protected]>;
发送时间: 2019年11月27日(星期三) 凌晨0:04
收件人: "haizlin/fe-interview"<[email protected]>;
抄送: "Coisini"<[email protected]>;"Comment"<[email protected]>;
主题: Re: [haizlin/fe-interview] [vue] vue-router有哪几种导航钩子（ 导航守卫 ）？ (#415)

ickt-5:
https://www.cnblogs.com/kzxiaotan/p/11676872.html

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[lizaiya]

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

[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) => {})