Nuxt/test/fixtures/basic/pages/nuxt-link/trailing-slash.vue

74 lines
2.0 KiB
Vue
Raw Normal View History

<script setup lang="ts">
const LinkWithTrailingSlash = defineNuxtLink({
trailingSlash: 'append'
})
const LinkWithoutTrailingSlash = defineNuxtLink({
trailingSlash: 'remove'
})
const links = [
'/',
'/nuxt-link/trailing-slash',
'/nuxt-link/trailing-slash/',
'/nuxt-link/trailing-slash?test=true&thing=other/thing#thing-other',
'/nuxt-link/trailing-slash/?test=true&thing=other/thing#thing-other',
{ name: 'nuxt-link-trailing-slash' },
{ query: { 'with-state': 'true' }, state: { foo: 'bar' } },
{ query: { 'without-state': 'true' } }
]
const route = useRoute()
const windowState = computed(() => {
console.log(route.fullPath)
return process.client ? window.history.state.foo : ''
})
</script>
<template>
<div>
<div data-testid="window-state">
<ClientOnly>
{{ windowState }}
</ClientOnly>
</div>
<ul>
<li v-for="(link, index) in links" :key="index">
<LinkWithTrailingSlash :to="link" class="link-with-trailing-slash">
<LinkWithTrailingSlash v-slot="{ href }" custom :to="link">
{{ href }}
</LinkWithTrailingSlash>
</LinkWithTrailingSlash>
</li>
</ul>
<hr>
<ul>
<li v-for="(link, index) in links" :key="index">
<LinkWithoutTrailingSlash :to="link" class="link-without-trailing-slash">
<LinkWithoutTrailingSlash v-slot="{ href }" custom :to="link">
{{ href }}
</LinkWithoutTrailingSlash>
</LinkWithoutTrailingSlash>
</li>
</ul>
<hr>
<ul>
<li v-for="(link, index) in links" :key="index">
<NuxtLink :to="link" class="nuxt-link">
<NuxtLink v-slot="{ href }" custom :to="link">
{{ href }}
</NuxtLink>
</NuxtLink>
</li>
</ul>
<hr>
<ul>
<li v-for="(link, index) in links" :key="index">
<RouterLink :to="link" class="router-link">
<RouterLink v-slot="{ href }" custom :to="link">
{{ href }}
</RouterLink>
</RouterLink>
</li>
</ul>
</div>
</template>