Skip to content

[vue] 说说vue-router完整的导航解析流程是什么？ #372

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.

Sign up for GitHub

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

Jump to bottom
Open
haizhilin2013 opened this issue Jun 20, 2019 · 6 comments
Open

[vue] 说说vue-router完整的导航解析流程是什么？ #372

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

Comments

@haizhilin2013
Copy link
Collaborator

[vue] 说说vue-router完整的导航解析流程是什么？
@haizhilin2013 haizhilin2013 added the vue vue label Jun 20, 2019
@Sihan-Tan
Copy link

1.导航被触发；2.在失活的组件里调用beforeRouteLeave守卫；3.调用全局beforeEach守卫；4.在复用组件里调用beforeRouteUpdate守卫；5.调用路由配置里的beforeEnter守卫；6.解析异步路由组件；7.在被激活的组件里调用beforeRouteEnter守卫；8.调用全局beforeResolve守卫；9.导航被确认；10..调用全局的afterEach钩子；11.DOM更新；12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

@zhaoling906
Copy link

1、router-link 【实现跳转最简单的方法】
<router-link to='需要跳转到的页面的路径>
2、this.$router.push({ path:’/user’}) 常用于路由传参
3、this.$router.replace{path：‘/’ }

@WenJieLi1998
Copy link

1.导航被触发
2.在即将离开的组件里调用beforeRouteLeave守卫
3.调用全局前置守卫beforeEach守卫
4.在重用的组件里调用beforeRouteUpdate守卫 / 调用路由配置的beforeEnter守卫
5.解析异步路由组件
6.在被激活的组件里调用beforeRouteEnter
7.调用全局的beforeResolve守卫
8.导航被确认
9.调用全局的 afterEach 钩子
10.触发DOM更新
11.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

@zhaoling906
Copy link

zhaoling906 commented Apr 19, 2020 via email

@time202051
Copy link

我裂开了

@J2233969810
Copy link

太复杂了8

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

No branches or pull requests
6 participants
@haizhilin2013 @Sihan-Tan @WenJieLi1998 @zhaoling906 @J2233969810 @time202051