have routing with parameters working

IT4Change · Nov 23, 2023 · 1937776 · 1937776
1 parent fedeaca
commit 1937776
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git a/renderer/app.ts b/renderer/app.ts
@@ -48,7 +48,7 @@ function createApp(pageContext: VikePageContext & PageContext, isClient = true)
 
   objectAssign(app, {
     changePage: (pageContext: VikePageContext & PageContext) => {
-      Object.assign(pageContextReactive, reactive(pageContext))
+      Object.assign(pageContextReactive, pageContext)
       rootComponent.Page = markRaw(pageContext.Page)
       rootComponent.pageProps = markRaw(pageContext.pageProps || {})
     },

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

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