Add possibility to never have trailing slashes

[fabis94]

What problem does this feature solve?

I'm working with an app that has very specific SEO requirements to never have any trailing slashes for any routes. This is impossible when working with nested routes, specifically 'default child routes' (routes with an empty path: ''), because all child routes will always be appended after the trailing slash of the parent route.

For example, consider that I have a parent route with component HomeBase, and two child components HomeIndex (default child route) and HomeArticle (path: ':aid').

const routes = [
    path: '/home',
    components: {
        default: HomeBase
    },
    children: [
        {
            path: '',
            component: HomeIndex
        },
        {
            path: ':aid',
            component: HomeArticle
        }
    ]
]

I want the routes to work like this:

• /home -> HomeIndex rendered within HomeBase
• /home/123 -> HomeArticle rendered within HomeBase

But VueRouter makes the routes look like this:

• /home/ -> HomeIndex rendered within HomeBase
• /home/123 -> HomeArticle rendered within HomeBase

Even though I probably could link directly to "/home" using , I want to use named routes, so it matters that VueRoute generates the correct path by itself.

What does the proposed API look like?

I'm not sure, as this could be handled multiple ways. At first I thought about making the base (HomeBase) route a named route and routing to that instead of the default child route, but VueRouter then explicitly doesn't render the children ("Named Route has a default child route. When navigating to this named route, 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."). One way would be to have this functionality be configurable.

Another way would be to set some sort of param on a child route so that its path is always appended on top of the parent path, without the path separator being added inbetween.

[posva]

This behavior can be controlled in v4 (https://github.com/vuejs/vue-router-next#improvements) via the strict option but in v3, empty child routes add a trailing slash by design so I don't think we will be able to add this in v3