docs: use props in user page

diff --git a/playground/router.ts b/playground/router.ts
index b179919217d94a4b73d7d124ca3166598589f390..e859f4b87c3ad0ac648f7a8a782af73d29b3ac12 100644 (file)
--- 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 bcf2264a66476823dfaea438515716f91bece5e2..8384bf8eeeea8e2b0c84ad581d66d3809d8117d0 100644 (file)
--- 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>