Nuxt.js: Removing trailingSlash with nested route cause some problem

[kosukemori]

Version

v2.10.1

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-9e9n1?fontsize=14

Steps to reproduce

1. Setup a nested route in pages directory
2. Add router: { trailingSlash: false} to nuxt.config.js

In the codesandbox, I created the following files

pages/
  ...
  - users.vue
  - users/
    - index.vue

What is expected ?

In https://9e9n1.sse.codesandbox.io/users, the contents of pages/users.vue & pages/users/index.vue are shown.

In https://9e9n1.sse.codesandbox.io/users/ (with trailingSlash), This page could not be found is shown

What is actually happening?

In https://9e9n1.sse.codesandbox.io/users, the contents of pages/users/index.vue is not shown. Only pages/users.vue is shown.

But in https://9e9n1.sse.codesandbox.io/users/ (with trailingSlash), the contents of both are shown.

Also, the following error appeared in console.

[vue-router] Named Route 'users' has a default child route. When navigating to this named route (:to="{name: 'users'"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route for named links instead.
[vue-router] Duplicate named routes definition: { name: "users", path: "/users" }

Additional comments?

The following is the summary of generated .nuxt/router.js

...
export const routerOptions = {
  mode: 'history',
  base: decodeURI('/'),
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  scrollBehavior,

  routes: [{
    path: "/users",
    component: ...,
    pathToRegexpOptions: {"strict":true},
    name: "users",
    children: [{
      path: "",
      component: ...,
      pathToRegexpOptions: {"strict":true},
      name: "users"
    }]
  },
  ...
  ],
  fallback: false
}
...

In my opinion, to remove trailing slash,

1. The path of children which is default root of nested route, should be same as parent's root.
2. We should not set name to parent of nested route. It's duplicated in children

So expected router.js may be

...
export const routerOptions = {
  mode: 'history',
  base: decodeURI('/'),
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  scrollBehavior,

  routes: [{
    path: "/users",
    component: ...,
    pathToRegexpOptions: {"strict":true},
    children: [{
      path: "/users",
      component: ...,
      pathToRegexpOptions: {"strict":true},
      name: "users"
    }]
  },
  ...
  ],
  fallback: false
}
...

Currently, my workaround is configuring nuxt.config.js as following

...
router: {
    trailingSlash: false,

    extendRoutes (routes) {
      routes.forEach(r => {
        if (!r.children) return

        delete r.name

        r.children.forEach(c => {
          if (c.path !== '') return

          c.path = r.path
        })
      })
    }
}
...

_{This bug report is available on Nuxt community (#c9930)}

[manniL]

Thanks for the report! I've implemented a naive bug fix in #6594 according to the error message. :relaxed:

[cain]

Is this related #6783

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.