fix(router-view): reuse saved instances in different records

[posva]

Close #444

Still worth adding edge cases

• Keep alive
• Dynamic names

[github-actions]

size-limit report

Path	Size
size-checks/webRouter.js	6.86 KB (+1.51% 🔺)
size-checks/webRouterAndVue.js	25.84 KB (+0.36% 🔺)

[posva]

The problem with this fix is that it doesn't fix update and leave guards inside setup because setup doesn't get re-executed and I don't have a way to tell if and which component instances are reused. When a component instance is reused by Vue to render two different routes, one needs to use a key attribute to force the setup to get executed again. We could use the $route.path:

<router-view :key="$route.path" />

but that would also recreate routes with different params. A more appropriate solution would be using the record's path (doesn't include parsed params and it unique) and the name of the view (default when there is only one view). The problem is this information is not accessible right now outside of RouterView because one needs to know the depth:

<!-- path is here the record's path e.g. /users/:id -->
<router-view name="named" :key="'named_' + $route.matched[depth].path" />
<router-view :key="'default_' + $route.matched[depth].path" />

This information could be exposed through the v-slot when having the need to reuse the same component for different routes, something like key in addition to Component and route:

<router-view v-slot="{ Component, key }" >
  <component :key="key" :is="Component" class="view" />
</router-view>

Another solution would be able to enforce this automatically inside RouterView, removing the need to write any of the code above, but also removing the possibility to reuse component instances for different routes. IMO, this is fine because of the problem mentioned at the very beginning (setup guards) and because they will still keep being reused when params change which is the most important part.

Another problem with reusing the same component instance for two different routes is that guards added inside setup could be based on conditions like route.meta or others that would need to be evaluated again and that is only possible by not reusing the component instance.

[posva]

At the end I manage to find a solution that reuses view instances so I went with that instead