mirror of
https://github.com/IT4Change/boilerplate-frontend.git
synced 2025-12-13 07:35:53 +00:00
have routing with parameters working
This commit is contained in:
parent
fedeacad19
commit
193777635e
@ -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 || {})
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
13
src/pages/app/index.page.server.ts
Normal file
13
src/pages/app/index.page.server.ts
Normal 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,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user