Visualized the text content of the "The Full Navigation Resolution Flow" section.

[niceplugin]

Visualized the text content of the last section of the "guide/advanced/navigation-guards.md" document: "The Full Navigation Resolution Flow".

If there is no problem with the content, it seems easier to understand than the text.

If you decide to use this image, duplicate it on the vue team's figma.
The figma link annotations in the documentation also need to be corrected.

If there are any problems, please reject this PR (with comments).

[netlify]

✅ Deploy Preview for vue-router ready!

Name	Link
🔨 Latest commit	fe91631
🔍 Latest deploy log	https://app.netlify.com/sites/vue-router/deploys/62e020d7d870bb000848c2b1
😎 Deploy Preview	https://deploy-preview-1486--vue-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[posva]

This is pretty neat! Do you have the editable file? We should remove the vue lifecycle hooks on the right (beforeUpdate and update) as there is no guarantee they will happen.
Also note beforeRouteLeave happens first and that beforeRouteEnter's next happen after DOM updates but there is no guarantee it's exactly after mounted or any other lifecycle hook

[niceplugin]

Image changed:

• Removed misleading Vue lifecycles
• More detailed router flows

Add content:

• Example implemented in code sandbox

There are no editable files, but the images were made in Figma.
If duplicated this project with "your or vue team's" figma account, can edit it in figma.
This is an image link that can be duplicated:
https://www.figma.com/file/nxHzZVExlwnOiWhfeDU0nB/Vue-Router-Flow

---

Also note beforeRouteLeave happens first and that beforeRouteEnter's next happen after DOM updates but there is no guarantee it's exactly after mounted or any other lifecycle hook

This is likely to be understood by users through more detailed images and examples.
If I misunderstood technically and wrote the content, please reject it again(with comments).

[posva]

• beforeRouteLeave happens at the very beginning, before beforeEach.
• There isn't a isFailed scenario. It's a pipeline that any navigation guard can stop at any time: it doesn't branch. I think it's much easier to just keep one timeline / one vertical arrow
• Between beforeResolve and afterEach the navigation is confirmed
• The last part should really become DOM updates instead of setup/mounted/beforeUnmount because there is no guarantee in the order of these compared to the router
• beforeRouteEnter next happens after that

[niceplugin]

Image changed:

• Flow modified

---

PS.
I've seen you visit my figma project. Now you can also edit this.

[niceplugin]

Has changed file any problems?
Looking forward to your feedback :)

[posva]

Thanks a lot, I will get back to this later on once I update vue router docs.