fix: route param parsing (#2711)

* fix: route param parsing * test: update snapshots and tests * test: fix test custom route * test: fix fixture localePath usage
nuxt-modules · Jan 19, 2024 · ba90b1f · ba90b1f
1 parent cd05cea
commit ba90b1f
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 20 deletions.
diff --git a/specs/fixtures/basic/pages/index.vue b/specs/fixtures/basic/pages/index.vue
@@ -62,7 +62,7 @@ useHead(() => ({
       >go to ignoring localized pick route</NuxtLink
     >
     <NuxtLink id="link-category" :to="localePath('/category/test')">go to category test</NuxtLink>
-    <NuxtLink id="link-products" :to="localePath({ name: 'products', params: { id: 'foo' } })">
+    <NuxtLink id="link-products" :to="localePath({ name: 'products-id', params: { id: 'foo' } })">
       go to product foo
     </NuxtLink>
     <NuxtLink id="link-history" :to="localePath({ name: 'history' })">go to history</NuxtLink>

diff --git a/specs/fixtures/basic/pages/products.vue b/specs/fixtures/basic/pages/products.vue
@@ -3,12 +3,3 @@
     <NuxtPage />
   </div>
 </template>
-
-<script setup>
-defineI18nRoute({
-  paths: {
-    en: '/products/:id',
-    fr: '/produits/:id'
-  }
-})
-</script>
diff --git a/specs/fixtures/basic/pages/products/[id].vue b/specs/fixtures/basic/pages/products/[id].vue
@@ -3,3 +3,12 @@
     <h1>This is a product page</h1>
   </div>
 </template>
+
+<script setup>
+defineI18nRoute({
+  paths: {
+    en: '/products/[id]',
+    fr: '/produits/[id]'
+  }
+})
+</script>
diff --git a/src/utils.ts b/src/utils.ts
@@ -392,7 +392,7 @@ export function parseSegment(segment: string) {
         if (c === '[' && state === SegmentParserState.dynamic) {
           state = SegmentParserState.optional
         }
-        if (c === ']' && (state !== SegmentParserState.optional || buffer[buffer.length - 1] === ']')) {
+        if (c === ']' && (state !== SegmentParserState.optional || segment[i - 1] === ']')) {
           if (!buffer) {
             throw new Error('Empty param')
           } else {
@@ -402,7 +402,6 @@ export function parseSegment(segment: string) {
         } else if (PARAM_CHAR_RE.test(c)) {
           buffer += c
         } else {
-          // eslint-disable-next-line no-console
           // console.debug(`[pages]Ignored character "${c}" while building param "${buffer}" from "segment"`)
         }
         break
@@ -543,16 +542,15 @@ export const mergeI18nModules = async (options: NuxtI18nOptions, nuxt: Nuxt) =>
 
 export function getRoutePath(tokens: SegmentToken[]): string {
   return tokens.reduce((path, token) => {
-    // prettier-ignore
     return (
       path +
       (token.type === SegmentTokenType.optional
         ? `:${token.value}?`
         : token.type === SegmentTokenType.dynamic
-          ? `:${token.value}`
+          ? `:${token.value}()`
           : token.type === SegmentTokenType.catchall
             ? `:${token.value}(.*)*`
-            : encodePath(token.value))
+            : encodePath(token.value).replace(/:/g, '\\:'))
     )
   }, '/')
 }

diff --git a/test/pages/__snapshots__/custom_route.test.ts.snap b/test/pages/__snapshots__/custom_route.test.ts.snap
@@ -107,7 +107,7 @@ exports[`Module configuration > dynamic parameters 1`] = `
     "children": [],
     "file": "/path/to/nuxt-app/pages/blog/[date]/[slug].vue",
     "name": "blog-date-slug___ja",
-    "path": "/ja/blog/tech/:date/:slug",
+    "path": "/ja/blog/tech/:date()/:slug()",
   },
   {
     "children": [],
@@ -270,17 +270,17 @@ exports[`Page components > dynamic route 1`] = `
   {
     "children": [],
     "name": "articles-name___en",
-    "path": "/articles/:name",
+    "path": "/articles/:name()",
   },
   {
     "children": [],
     "name": "articles-name___ja",
-    "path": "/ja/%E8%A8%98%E4%BA%8B/:name",
+    "path": "/ja/%E8%A8%98%E4%BA%8B/:name()",
   },
   {
     "children": [],
     "name": "articles-name___fr",
-    "path": "/fr/articles/:name",
+    "path": "/fr/articles/:name()",
   },
 ]
 `;

diff --git a/test/utils.test.ts b/test/utils.test.ts
@@ -197,5 +197,5 @@ test('parseSegment', () => {
 
 test('getRoutePath', () => {
   const tokens = parseSegment('[foo]_[bar]:[...buz]_buz_[[qux]]')
-  expect(getRoutePath(tokens)).toBe(`/:foo_:bar::buz(.*)*_buz_:qux?`)
+  expect(getRoutePath(tokens)).toBe(`/:foo()_:bar()\\::buz(.*)*_buz_:qux?`)
 })