mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-05 11:57:13 +00:00
68 lines
1.2 KiB
Vue
68 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<NuxtLink
|
|
to="/"
|
|
no-prefetch
|
|
>
|
|
Home
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/random/a"
|
|
prefetched-class="prefetched"
|
|
>
|
|
Random (A)
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/random/b"
|
|
prefetched-class="prefetched"
|
|
>
|
|
Random (B)
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/random/c"
|
|
prefetched-class="prefetched"
|
|
>
|
|
Random (C)
|
|
</NuxtLink>
|
|
<ServerOnlyComponent />
|
|
<br>
|
|
|
|
Random: {{ random }}
|
|
|
|
Random: (global) {{ globalRandom }}
|
|
|
|
Random page: <b>{{ route.params.id }}</b><br>
|
|
|
|
Here are some random numbers for you:
|
|
|
|
<ul>
|
|
<li
|
|
v-for="n in randomNumbers"
|
|
:key="n"
|
|
>
|
|
{{ n }}
|
|
</li>
|
|
</ul>
|
|
<button @click="() => refresh()">
|
|
Give me another set
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute('random-id')
|
|
|
|
const pageKey = 'rand_' + route.params.id
|
|
|
|
const { data: randomNumbers, refresh } = await useFetch('/api/random', { key: pageKey as string })
|
|
|
|
const random = useRandomState(100, pageKey)
|
|
const globalRandom = useRandomState(100)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.prefetched {
|
|
color: green;
|
|
}
|
|
</style>
|