diff --git a/packages/nuxt/src/pages/utils.ts b/packages/nuxt/src/pages/utils.ts index eb91468cb89..2d3670ad686 100644 --- a/packages/nuxt/src/pages/utils.ts +++ b/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 ( diff --git a/packages/nuxt/test/pages.test.ts b/packages/nuxt/test/pages.test.ts index ec2d5aeb82f..d5ff507183a 100644 --- a/packages/nuxt/test/pages.test.ts +++ b/packages/nuxt/test/pages.test.ts @@ -105,11 +105,17 @@ describe('pages:generateRoutesFromFiles', () => { ], output: [ { - name: 'slug', - path: '/:slug', - file: `${pagesDir}/[slug].vue`, + name: 'sub-slug', + path: '/sub/:slug', + 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: 'bar', - file: 'pages/[bar]/index.vue', - path: '/:bar' - }, - { - name: 'sub-slug', - path: '/sub/:slug', - file: `${pagesDir}/sub/[slug].vue`, + name: 'slug', + path: '/:slug', + file: `${pagesDir}/[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(.*)*',