]> git.ipfire.org Git - thirdparty/vuejs/router.git/commitdiff
docs: note about router-view slot
authorEduardo San Martin Morote <posva13@gmail.com>
Sun, 20 Sep 2020 19:26:43 +0000 (21:26 +0200)
committerEduardo San Martin Morote <posva13@gmail.com>
Sun, 20 Sep 2020 19:27:08 +0000 (21:27 +0200)
From #475

docs/api/index.md
docs/guide/migration/index.md

index 9757125588b5ede01e3b707c6598baf593eb6bc2..0a03352086d7e9086f4d8ec47518685ca8cc0fd2 100644 (file)
@@ -433,6 +433,10 @@ _Parameters_
 | --------- | ----------------------------------- | ------------------- |
 | route     | [`RouteRecordRaw`](#routerecordraw) | Route Record to add |
 
+:::tip
+Note adding routes does not trigger a new navigation, meaning that the added route will not be displayed unless a new navigation is triggered.
+:::
+
 ### afterEach
 
 Add a navigation hook that is executed after every navigation. Returns a function that removes the registered hook.
index c25a85408b988db2f18a7dd61bb57eb90747c29b..393ffd24ed0a3be8ab288a88fe24a5a6e930d669 100644 (file)
@@ -285,6 +285,26 @@ The object returned in `scrollBehavior` is now similar to [`ScrollToOptions`](ht
 
 **Reason**: This is was a necessary change. See the [related RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0034-router-view-keep-alive-transitions.md).
 
+### Passing content to route components' `<slot>`
+
+Before you could directly pass a template to be rendered by a route components' `<slot>` by nesting it under a `<router-view>` component:
+
+```html
+<router-view>
+  <p>In Vue Router 3, I render inside the route component</p>
+</router-view>
+```
+
+Because of the introduction of the `v-slot` api for `<router-view>`, you must pass it to the `<component>` using the `v-slot` API:
+
+```html
+<router-view v-slot="{ Component }">
+  <component :is="Component">
+    <p>In Vue Router 3, I render inside the route component</p>
+  </component>
+</router-view>
+```
+
 ### Removal of `parent` from route locations
 
 The `parent` property has been removed from normalized route locations (`this.$route` and object returned by `router.resolve`). You can still access it via the `matched` array: