docs: add a guide to the RouterView slot

skirtles-code commented 9 months ago

The slot for RouterView is mentioned in a few places within the docs, but it isn't directly explained anywhere. This PR adds a new page to the advanced guides covering that topic.

Perhaps this isn't the best way to introduce the topic, but maybe it'll be useful as a starting point to discuss it further.

I've put this guide just before the guide to transitions, as that guide heavily relies on using the slot. The slot is also used in the earlier guide to passing props, but I didn't think it made sense to have this new page in the Essentials section. Instead, I've just linked to the new page from that earlier page.

There are a few things I would like any reviewers to consider:

Any suggestions for improvements to the file name and page title? router-view-slot.md and RouterView slot make sense, but it seems a little inconsistent with some of the other page titles. The page is a bit of a mash up of various different problems solved by the same feature. Does it actually make sense to put these different cases together like this?
Are there other or better uses of the slot that should be covered?
I haven't mentioned that the Component slot prop is actually a VNode.
I've glossed over the detail that the Component slot prop will initially be undefined. In general, this aspect of the timing of route resolution doesn't seem to be covered in the documentation, but I decided this probably wasn't the right place to go down that rabbit hole.
I'm not entirely sure what the use case for the route slot prop is, rather than using $route. I figured it makes it easier when working with render functions, but I couldn't come up with a specific example that wasn't mind-melting complicated, so I didn't go into details. I did check the RFC, which mentioned working with JSX, but I figured that just saying 'render functions' covered that case too.

netlify[bot] commented 9 months ago

Deploy Preview for vue-router ready!

Name	Link
Latest commit	05c5fd5f08ed7793c0682490b3833f976edf4166
Latest deploy log	https://app.netlify.com/sites/vue-router/deploys/655ed4ed4ec7af00085eeae3
Deploy Preview	https://deploy-preview-2049--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 configuration.

skirtles-code commented 9 months ago

I think I've made all the requested changes.

I had to reword a few bits because the wording didn't quite work with the new order.

I also spotted some small mistakes in the original draft which I've now corrected.

vuejs / router