fix(nuxt): sort routes with dynamic params at the end (#4983)

packages/nuxt/src/pages/utils.ts

@@ -88,11 +88,15 @@ export function generateRoutesFromFiles (files: string[], pagesDir: string): Nux
     }
 
     parent.push(route)
+    // TODO: https://github.com/vuejs/router/issues/1435
+    parent.sort((a, b) => getSortablePath(a.path).localeCompare(getSortablePath(b.path)))
   }
 
   return prepareRoutes(routes)
 }
 
+const getSortablePath = (path: string) => path.replace(/^\//, '').replace(/:/, 'Z')
+
 function getRoutePath (tokens: SegmentToken[]): string {
   return tokens.reduce((path, token) => {
     return (

packages/nuxt/test/pages.test.ts

@@ -105,11 +105,17 @@ describe('pages:generateRoutesFromFiles', () => {
       ],
       output: [
         {
-          name: 'slug',
+          name: 'sub-slug',
-          path: '/:slug',
+          path: '/sub/:slug',
-          file: `${pagesDir}/[slug].vue`,
+          file: `${pagesDir}/sub/[slug].vue`,
           children: []
         },
+        {
+          children: [],
+          name: 'bar',
+          file: 'pages/[bar]/index.vue',
+          path: '/:bar'
+        },
         {
           children: [
             {
@@ -124,15 +130,9 @@ describe('pages:generateRoutesFromFiles', () => {
           path: '/:foo?'
         },
         {
-          children: [],
+          name: 'slug',
-          name: 'bar',
+          path: '/:slug',
-          file: 'pages/[bar]/index.vue',
+          file: `${pagesDir}/[slug].vue`,
-          path: '/:bar'
-        },
-        {
-          name: 'sub-slug',
-          path: '/sub/:slug',
-          file: `${pagesDir}/sub/[slug].vue`,
           children: []
         },
         {
@@ -145,8 +145,14 @@ describe('pages:generateRoutesFromFiles', () => {
     },
     {
       description: 'should generate correct catch-all route',
-      files: [`${pagesDir}/[...slug].vue`],
+      files: [`${pagesDir}/[...slug].vue`, `${pagesDir}/index.vue`],
       output: [
+        {
+          name: 'index',
+          path: '/',
+          file: `${pagesDir}/index.vue`,
+          children: []
+        },
         {
           name: 'slug',
           path: '/:slug(.*)*',