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

<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' } },
  'https://example.com/page.html'
] as const

const route = useRoute()
const windowState = computed(() => {
  if (import.meta.client) {
    console.log(route.fullPath)
    return window.history.state.foo
  }
  return ''
})
</script>

<template>
  <div>
    <h2>window state</h2>
    <div data-testid="window-state">
      <ClientOnly>
        {{ windowState }}
      </ClientOnly>
    </div>
    <h2>Links With Trailing Slash</h2>
    <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>
    <h2>Links Without Trailing Slash</h2>
    <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>
    <h2>Nuxt Link</h2>
    <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>
    <h2>Router Link</h2>
    <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>