From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sun, 15 Mar 2020 23:21:16 +0000 (+0100)
Subject: docs: use props in user page
X-Git-Tag: v4.0.0-alpha.4~59
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4215e640f2cf8151b748f56174528013906cdec5;p=thirdparty%2Fvuejs%2Frouter.git

docs: use props in user page
---

diff --git a/playground/router.ts b/playground/router.ts
index b1799192..e859f4b8 100644
--- a/playground/router.ts
+++ b/playground/router.ts
@@ -19,7 +19,7 @@ export const router = createRouter({
   history: routerHistory,
   routes: [
     { path: '/', component: Home },
-    { path: '/users/:id', name: 'user', component: User },
+    { path: '/users/:id', name: 'user', component: User, props: true },
     { path: '/documents/:id', name: 'docs', component: User },
     { path: encodeURI('/n/€'), name: 'euro', component },
     { path: '/n/:n', name: 'increment', component },
diff --git a/playground/views/User.vue b/playground/views/User.vue
index bcf2264a..8384bf8e 100644
--- a/playground/views/User.vue
+++ b/playground/views/User.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>User: {{ route.params.id }}</div>
+  <div>User: {{ id }}</div>
 </template>
 
 <script>
@@ -7,10 +7,8 @@ import { defineComponent, inject } from 'vue'
 
 export default defineComponent({
   name: 'User',
-  setup() {
-    const route = inject('route')
-    console.log('calling setup in User')
-    return { route }
+  props: {
+    id: String,
   },
 })
 </script>