feat(pages): add catchall support (`[...id].vue`) (#254)

examples/pages/pages/catchall/[...id].vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    test-{{ $route.params.id }}
+  </div>
+</template>

packages/pages/src/utils.ts

@@ -13,11 +13,13 @@ enum SegmentParserState {
   initial,
   static,
   dynamic,
+  catchall,
 }
 
 enum SegmentTokenType {
   static,
   dynamic,
+  catchall,
 }
 
 interface SegmentToken {
@@ -93,15 +95,17 @@ function getRoutePath (tokens: SegmentToken[]): string {
       path +
       (token.type === SegmentTokenType.dynamic
         ? `:${token.value}`
-        : encodePath(token.value))
+        : token.type === SegmentTokenType.catchall
+          ? `:${token.value}(.*)*`
+          : encodePath(token.value))
     )
   }, '/')
 }
 
-const PARAM_CHAR_RE = /[\w\d_]/
+const PARAM_CHAR_RE = /[\w\d_.]/
 
 function parseSegment (segment: string) {
-  let state = SegmentParserState.initial
+  let state: SegmentParserState = SegmentParserState.initial
   let i = 0
 
   let buffer = ''
@@ -119,7 +123,9 @@ function parseSegment (segment: string) {
       type:
         state === SegmentParserState.static
           ? SegmentTokenType.static
-          : SegmentTokenType.dynamic,
+          : state === SegmentParserState.dynamic
+            ? SegmentTokenType.dynamic
+            : SegmentTokenType.catchall,
       value: buffer
     })
 
@@ -149,7 +155,12 @@ function parseSegment (segment: string) {
         }
         break
 
+      case SegmentParserState.catchall:
       case SegmentParserState.dynamic:
+        if (buffer === '...') {
+          buffer = ''
+          state = SegmentParserState.catchall
+        }
         if (c === ']') {
           consumeBuffer()
           state = SegmentParserState.initial