IT4Change/boilerplate-frontend
3
0
Fork 0
mirror of https://github.com/IT4Change/boilerplate-frontend.git synced 2025-12-13 07:35:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

utilize vike navigate for client side navigation

Browse Source
This commit is contained in:
Ulf Gebhardt 2024-01-09 05:39:06 +01:00
parent 59f74e150f
commit 63ce6530a0
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/VikeBtn.vue
View File

@ -1,13 +1,22 @@
<template> <template>
<v-btn :variant="isRouteSelected($attrs.href as string) ? 'tonal' : 'flat'"> <v-btn
:variant="isRouteSelected($attrs.href as string) ? 'tonal' : 'flat'"
@click.prevent="onClick($attrs.href as string)"
>
<slot /> <slot />
</v-btn> </v-btn>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { navigate } from 'vike/client/router'
import { usePageContext } from '#context/usePageContext' import { usePageContext } from '#context/usePageContext'
const pageContext = usePageContext() const pageContext = usePageContext()
function onClick(href: string) {
return navigate(href)
}
const isRouteSelected = (href: string) => { const isRouteSelected = (href: string) => {
if (href === '/app') { if (href === '/app') {
return pageContext.urlPathname.indexOf(href) === 0 return pageContext.urlPathname.indexOf(href) === 0