docs: codesandbox links

diff --git a/docs/guide/essentials/dynamic-matching.md b/docs/guide/essentials/dynamic-matching.md
index ed192b8e10cf8aa44cc2a35ca5df5df433e26aab..08618ea5d49423661238a18a436268d28481e2b0 100644 (file)
--- 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 0d8c76a25f82cd381d7c3829df6286bb7cec8981..ad4617ce8dabdf7d756875bfa80c5c7b255d5baf 100644 (file)
--- 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 6c7cfe75979a86fb0cbe69a6a628103eb7bd6378..71ad42dbaf38a16aac2d037cd3736a39e78f8e95 100644 (file)
--- 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).