refactor(router-view): render children as placeholder #2799
Conversation
|
Hey, thanks for this, it's a very detailed and understandable issue, I think it's a good idea and a good opportunity to think about the API of router-view to maybe also handle 404 routes |
briwa
force-pushed
the
render-children-initial
branch
from
7e659c9 to
1476dc6
Compare
|
@posva I agree, right now what I did with the 404 cases is that they are pretty much handled by backend rendering. Should the changes for the error pages be done in this PR as well? Or is it something to think about later on. |
|
@posva Sorry if I bumped this PR again 😅 Just in case I wasn't clear. Is there anything else I needed to do in this PR so that it can be reviewed? Thanks. |
|
No, nothing to do. I will get into this when I can but it will probably go through an RFC first |
|
Understood, thanks @posva |
|
Hello @posva, sorry for bumping this PR again after two months. Any updates on the RFC, or maybe I can help with it, so that this PR can get in? Thank you. |
|
Hey, no updates yet. You could, if you have the time, prepare an RFC at https://github.com/vuejs/rfcs instead of a PR |
|
Thank you for the PR. I'm closing it for the moment as we need to wait for vuejs/rfcs#80 and vuejs/rfcs#160 I will reopen if we go forward with the change! |
This is not a bug, but the way I use
router-viewis that it has a placeholder using therouter-viewchildren before rendering it with the actual view from the component. Here's a little demo:https://codesandbox.io/s/vue-routing-example-b1t5d
You see that there's a slight delay before the route component gets rendered. It gets quite apparent when you have a
beforeEachnavigation guard that delays the route to be rendered. The 'blinking' effect between the blank page and the rendered component is undesirable and I am trying to improve it.I tried using async component to no avail, and it turned out that the cause was when the router is initialized, it is validating an initial route, and it is rendering an empty node since there is no match. This explains the blank page/element that I was facing.
My proposal is to render the children instead of an empty node, so that there is something to be rendered before the route component takes place. This applies to any kinds of route mismatches though. I made a little example and an e2e test to demonstrate the change.
Also, I did search through the issues but none of it seemed to mention this problem (could be very specific to the problem I'm facing, or maybe I missed it, CMIIW), so if this isn't exactly what Vue Router is aiming for, I understand, but maybe you could suggest a solution for me 😅. But if this is good enough, that would be so great, though I'm not sure if I'm doing the e2e test right.
Anyhow, let me know! Thanks for Vue Router btw, I've been using it for the past 2 years and it's been terrific.