have routing with parameters working

This commit is contained in:
Ulf Gebhardt 2023-11-23 16:58:17 +01:00
parent fedeacad19
commit 193777635e
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9
4 changed files with 17 additions and 14 deletions

View File

@ -48,7 +48,7 @@ function createApp(pageContext: VikePageContext & PageContext, isClient = true)
objectAssign(app, { objectAssign(app, {
changePage: (pageContext: VikePageContext & PageContext) => { changePage: (pageContext: VikePageContext & PageContext) => {
Object.assign(pageContextReactive, reactive(pageContext)) Object.assign(pageContextReactive, pageContext)
rootComponent.Page = markRaw(pageContext.Page) rootComponent.Page = markRaw(pageContext.Page)
rootComponent.pageProps = markRaw(pageContext.pageProps || {}) rootComponent.pageProps = markRaw(pageContext.pageProps || {})
}, },

View File

@ -10,8 +10,8 @@ export default (pageContext: PageContext) => {
} }
} }
const result = resolveRoute('/app/@id', pageContext.urlPathname) const result = resolveRoute('/app/@page', pageContext.urlPathname)
if (!['inc', 'reset'].includes(result.routeParams.id)) { if (!['inc', 'reset'].includes(result.routeParams.page)) {
return false return false
} }
return result return result

View File

@ -0,0 +1,13 @@
import type { PageContextBuiltInServer } from 'vike/types'
export { onBeforeRender }
async function onBeforeRender(pageContext: PageContextBuiltInServer) {
const { page } = pageContext.routeParams
const pageProps = { page }
return {
pageContext: {
pageProps,
},
}
}

View File

@ -6,7 +6,6 @@
<v-list-item link title="Increase" :active="page === 'inc'" href="/app/inc"></v-list-item> <v-list-item link title="Increase" :active="page === 'inc'" href="/app/inc"></v-list-item>
<v-divider class="my-2"></v-divider> <v-divider class="my-2"></v-divider>
<v-list-item link title="Reset" :active="page === 'reset'" href="/app/reset"></v-list-item> <v-list-item link title="Reset" :active="page === 'reset'" href="/app/reset"></v-list-item>
</v-list> </v-list>
</template> </template>
@ -31,18 +30,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { usePageContext } from '#context/usePageContext'
import DefaultLayout from '#layouts/DefaultLayout.vue' import DefaultLayout from '#layouts/DefaultLayout.vue'
import { useCounterStore } from '#stores/counter' import { useCounterStore } from '#stores/counter'
const counter = useCounterStore() const counter = useCounterStore()
defineProps(['page'])
/*
const {
routeParams: { id: page },
} = usePageContext()
*/
const { routeParams } = usePageContext()
const page = routeParams?.id
// console.log(page)
</script> </script>