11import { createRouter , createWebHistory , useRoute } from '../../src'
2- import { RouteComponent , RouteLocationNormalizedLoaded } from '../../src/types'
3- import { createApp , readonly , ref , watchEffect , computed , toRefs } from 'vue'
2+ import { RouteLocationNormalizedLoaded } from '../../src/types'
3+ import {
4+ createApp ,
5+ readonly ,
6+ ref ,
7+ watchEffect ,
8+ computed ,
9+ toRefs ,
10+ defineComponent ,
11+ PropType ,
12+ } from 'vue'
413
514const users = readonly ( [
615 { name : 'John' } ,
@@ -23,7 +32,7 @@ function closeUserModal() {
2332 history . back ( )
2433}
2534
26- const Home : RouteComponent = {
35+ const Home = defineComponent ( {
2736 template : `<div>
2837 <h1>Home</h1>
2938 <p>Select a user</p>
@@ -80,9 +89,9 @@ const Home: RouteComponent = {
8089 users,
8190 }
8291 } ,
83- }
92+ } )
8493
85- const About : RouteComponent = {
94+ const About = defineComponent ( {
8695 template : `<div>
8796 <h1>About</h1>
8897 <button @click="back">Back</button>
@@ -92,19 +101,25 @@ const About: RouteComponent = {
92101 methods : {
93102 back : ( ) => history . back ( ) ,
94103 } ,
95- }
104+ } )
96105
97- const UserDetails : RouteComponent = {
106+ const UserDetails = defineComponent ( {
98107 template : `<div>
99108 <h1>User #{{ id }}</h1>
100109 <p>
101110 Name: {{ users[id].name }}
102111 </p>
103112 <router-link to="/">Back home</router-link>
104113 </div>` ,
105- props : [ 'id' ] ,
114+ props : {
115+ id : {
116+ type : String ,
117+ // FIXME: setting this to true fails with props: true, as if it didn't fit the definition of RouteComponent
118+ required : false ,
119+ } ,
120+ } ,
106121 data : ( ) => ( { users } ) ,
107- }
122+ } )
108123
109124const webHistory = createWebHistory ( '/' + __dirname )
110125const router = createRouter ( {
0 commit comments