Nuxt.js: Weird behavior with trailingSlash=false and child routes

[rchl]

Versions

• nuxt: v2.14.0
• node: v12.18.2

Reproduction

https://codesandbox.io/s/nuxt-trailingslash-false-and-child-routes-3etm9?file=/pages/posts.vue

Nuxt configuration

  router: {
    trailingSlash: false
  },

Routes configuration

  routes: [{
    path: "/posts",
    component: _ad4aa402,
    pathToRegexpOptions: {"strict":true},
    children: [{
      path: "",
      component: _19067942,
      pathToRegexpOptions: {"strict":true},
      name: "posts"
    }, {
      path: ":slug?",
      component: _174fd7fa,
      pathToRegexpOptions: {"strict":true},
      name: "posts-slug"
    }]
  }, {
    path: "/",
    component: _00cac37e,
    pathToRegexpOptions: {"strict":true},
    name: "index"
  }],

  fallback: false
}

Directory structure:

Steps to reproduce

With a directory structure like pictured above (where the posts.vue parent route contains <router-view>), navigate to both /posts and /posts/.

What is Expected?

I'm not sure but possibly the opposite of what is happening right now.

What is actually happening?

• Navigating to /posts loads the posts/_slug child route.
• Navigating to /posts/ loads the posts/index child route.

[rchl]

Results for the previous version of Nuxt (2.13.3):

• Navigating to /posts does not load any child route
• Navigating to /posts/ loads the posts/index child route.

Routes configuration

  routes: [{
    path: "/posts",
    component: _ad4aa402,
    pathToRegexpOptions: {"strict":true},
    name: "posts",
    children: [{
      path: "",
      component: _19067942,
      pathToRegexpOptions: {"strict":true},
      name: "posts"
    }, {
      path: ":slug",
      component: _174fd7fa,
      pathToRegexpOptions: {"strict":true},
      name: "posts-slug"
    }]
  }, {
    path: "/",
    component: _00cac37e,
    pathToRegexpOptions: {"strict":true},
    name: "index"
  }],

  fallback: false
}

Notice that in the new version of Nuxt the _slug route has :slug? path while in the older version it has :slug. This is probably related to the parent route no longer having a name (which is likely the right thing to do).

[rchl]

@manniL What do you think is expected here regarding the child _slug route being optional? Since there is an index route besides it, I would think that it shouldn't be optional.

This also seems related to #7843 so CC'ing @farnabaz

[manniL]

So, with trailingSlash being false, I'd expect to have /posts to show the index page while /posts/ shouldn't show any and return a 404. /posts/foo should then show the _slug.vue content while /posts/foo/ should return a 404.

[rchl]

@farnabaz since you've done some related changes, do you want to tackle this too? :)

Or do you have an opinion at least and does it match with @manniL 's?

[farnabaz]

@manniL Take a look at https://github.com/nuxt/nuxt.js/pull/6594/files#diff-1288a325a940f45fdc5707e5485c442aR75

When we replace defaultChildRoute.name with parent's name, we remove -index from defaultChildRoute.name.
By removing -index from defaultChildRoute.name, :slug in the other child will become optional and it causes the issue.

[vanling]

In nuxt-edge trailingSlash: false, results in $route.name to be undefined when using nuxt-child and going to /parent expect it to be parent-index.

I think this is the same issue

So, with trailingSlash being false, I'd expect to have /posts to show the index page while /posts/ shouldn't show any and return a 404. /posts/foo should then show the _slug.vue content while /posts/foo/ should return a 404.

@manniL this would be the ideal solution.

[rchl]

I'm not updating Nuxt dependency in nuxt-i18n until this is fixed. :P

[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.

[rchl]

..

[aviramaz]

Bump, any updates/progress?

[pi0]

This should be fixed in v2.14.8. Please reopen if not.

[rchl]

There is still an issue with trailingSlash: true but I'll create a separate issue for that.

[rchl]

New issue: #8422