test: add failing test

test/basic.test.ts

@@ -978,6 +978,30 @@ describe.skipIf(isDev() || isWindows)('payload rendering', () => {
     )
   })
 
+  it('does fetch payload for page with trailing slash', async () => {
+    const page = await createPage()
+    const requests = [] as string[]
+
+    page.on('request', (req) => {
+      requests.push(req.url().replace(url('/'), '/'))
+    })
+
+    await page.goto(url('/random-catchall/a/'))
+    await page.waitForLoadState('networkidle')
+  
+    // We are not triggering API requests in the payload in client-side nav
+    expect(requests).not.toContain('/api/random')
+    expect(requests).not.toContain(expect.stringContaining('/__nuxt_island'))
+
+    // Go to pre-rendered page with trailing slash
+    await page.click('[href="/random-catchall/b/"]')
+    await page.waitForLoadState('networkidle')
+
+    // We are not triggering API requests in the payload in client-side nav
+    expect(requests).not.toContain('/api/random')
+    expect(requests).not.toContain(expect.stringContaining('/__nuxt_island'))
+  })
+
   it('does not fetch a prefetched payload', async () => {
     const page = await createPage()
     const requests = [] as string[]

test/fixtures/basic/nuxt.config.ts

@@ -45,7 +45,9 @@ export default defineNuxtConfig({
       routes: [
         '/random/a',
         '/random/b',
-        '/random/c'
+        '/random/c',
+        '/random-catchall/a/',
+        '/random-catchall/b/',
       ]
     }
   },

test/fixtures/basic/pages/random-catchall/[...id].vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <NuxtLink to="/" prefetched-class="prefetched">
+      Home
+    </NuxtLink>
+    <NuxtLink to="/random-catchall/a/" prefetched-class="prefetched">
+      Random (A)
+    </NuxtLink>
+    <NuxtLink to="/random-catchall/b/" prefetched-class="prefetched">
+      Random (B)
+    </NuxtLink>
+    <NuxtLink to="/random-catchall/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()
+
+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>