From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 14 Sep 2020 12:18:02 +0000 (+0200)
Subject: docs: codesandbox links
X-Git-Tag: v4.0.0-beta.10~18
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0dea726855e6b21cc6c95cdcb2343dc2c3c69f08;p=thirdparty%2Fvuejs%2Frouter.git

docs: codesandbox links
---

diff --git a/docs/guide/essentials/dynamic-matching.md b/docs/guide/essentials/dynamic-matching.md
index ed192b8e..08618ea5 100644
--- a/docs/guide/essentials/dynamic-matching.md
+++ b/docs/guide/essentials/dynamic-matching.md
@@ -10,11 +10,11 @@ const User = {
 // these are passed to `createRouter`
 const routes = [
   // dynamic segments start with a colon
-  { path: '/user/:id', component: User },
+  { path: '/users/:id', component: User },
 ]
 ```
 
-Now URLs like `/user/johnny` and `/user/jolyne` will both map to the same route.
+Now URLs like `/users/johnny` and `/users/jolyne` will both map to the same route.
 
 A _param_ is denoted by a colon `:`. When a route is matched, the value of its _params_ will be exposed as `this.$route.params` in every component. Therefore, we can render the current user ID by updating `User`'s template to this:
 
@@ -24,22 +24,28 @@ const User = {
 }
 ```
 
-<!-- TODO: replace with codesandbox -->
-
-You can check out a live example [here](https://jsfiddle.net/yyx990803/4xfa2f19/).
-
 You can have multiple _params_ in the same route, and they will map to corresponding fields on `$route.params`. Examples:
 
-| pattern                      | matched path           | \$route.params                           |
-| ---------------------------- | ---------------------- | ---------------------------------------- |
-| /user/:username              | /user/eduardo          | `{ username: 'eduardo' }`                |
-| /user/:username/post/:postId | /user/eduardo/post/123 | `{ username: 'eduardo', postId: '123' }` |
+| pattern                        | matched path             | \$route.params                           |
+| ------------------------------ | ------------------------ | ---------------------------------------- |
+| /users/:username               | /users/eduardo           | `{ username: 'eduardo' }`                |
+| /users/:username/posts/:postId | /users/eduardo/posts/123 | `{ username: 'eduardo', postId: '123' }` |
 
 In addition to `$route.params`, the `$route` object also exposes other useful information such as `$route.query` (if there is a query in the URL), `$route.hash`, etc. You can check out the full details in the [API Reference](../../api/#the-route-object).
 
+A working demo of this example can be found [here](https://codesandbox.io/embed/objective-dew-ogjbp?initialpath=%2Fusers%2Feduardo%2Fposts%2F1).
+
+<!-- <iframe
+  src="https://codesandbox.io/embed/objective-dew-ogjbp?fontsize=14&theme=light&view=preview&initialpath=%2Fusers%2Feduardo%2Fposts%2F1"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+  title="Route Params example"
+  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe> -->
+
 ## Reacting to Params Changes
 
-One thing to note when using routes with params is that when the user navigates from `/user/johnny` to `/user/jolyne`, **the same component instance will be reused**. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. **However, this also means that the lifecycle hooks of the component will not be called**.
+One thing to note when using routes with params is that when the user navigates from `/users/johnny` to `/users/jolyne`, **the same component instance will be reused**. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. **However, this also means that the lifecycle hooks of the component will not be called**.
 
 To react to params changes in the same component, you can simply watch anything on the `$route` object, in this scenario, the `$route.params`:
 
diff --git a/docs/guide/essentials/named-views.md b/docs/guide/essentials/named-views.md
index 0d8c76a2..ad4617ce 100644
--- a/docs/guide/essentials/named-views.md
+++ b/docs/guide/essentials/named-views.md
@@ -28,9 +28,7 @@ const router = createRouter({
 })
 ```
 
-<!-- TODO: use inline example -->
-
-A working demo of this example can be found [here](https://jsfiddle.net/posva/6du90epg/).
+A working demo of this example can be found [here](https://codesandbox.io/embed/named-views-s49go).
 
 ## Nested Named Views
 
@@ -86,4 +84,4 @@ Then you can achieve the layout above with this route configuration:
 }
 ```
 
-A working demo of this example can be found [here](https://jsfiddle.net/posva/22wgksa3/).
+A working demo of this example can be found [here](https://codesandbox.io/s/nested-named-views-c371h?&initialpath=%2Fsettings%2Femails).
diff --git a/docs/guide/essentials/nested-routes.md b/docs/guide/essentials/nested-routes.md
index 6c7cfe75..71ad42db 100644
--- a/docs/guide/essentials/nested-routes.md
+++ b/docs/guide/essentials/nested-routes.md
@@ -92,6 +92,4 @@ const routes = [
 ]
 ```
 
-<!-- TODO: codesandbox -->
-
-A working demo of this example can be found [here](https://jsfiddle.net/yyx990803/L7hscd8h/).
+A working demo of this example can be found [here](https://codesandbox.io/embed/nested-views-cmn6l?initialpath=%2Fusers%2Feduardo).