Nuxt/examples/routing/pages/app.vue
Anthony Fu c95a48c632
feat(nuxt): add <NuxtLoadingIndicator> component (#5121)
Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com>
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: Pooya Parsa <pooya@pi0.io>
2022-07-07 19:59:55 +02:00

40 lines
1.1 KiB
Vue

<script setup lang="ts">
const route = useRoute()
</script>
<template>
<NuxtExampleLayout example="routing/pages">
<NuxtLoadingIndicator />
<NuxtPage />
<template #nav>
<nav class="flex align-center gap-4 p-4">
<NuxtLink to="/" class="n-link-base">
Home
</NuxtLink>
<NuxtLink to="/about" class="n-link-base">
About
</NuxtLink>
<NuxtLink to="/parent" class="n-link-base">
Parent (index)
</NuxtLink>
<NuxtLink to="/parent/b" class="n-link-base">
Parent (b)
</NuxtLink>
<button class="n-link-base" @click="$router.push(`/parent/reload-${(Math.random() * 100).toFixed()}`)">
Keyed child
</button>
<button class="n-link-base" @click="$router.push(`/parent/static-${(Math.random() * 100).toFixed()}`)">
Non-keyed child
</button>
</nav>
</template>
<template #footer>
<div class="text-center p-4 op-50">
Current route: <code>{{ route.path }}</code>
</div>
</template>
</NuxtExampleLayout>
</template>