VueRouter automatically includes a trailing slash before the child route's path. Consider this example of a route configuration:
const routes = [
path: '/home',
components: {
default: HomeBase
},
children: [
{
path: '',
component: HomeIndex,
name: 'home.index'
},
{
path: ':aid',
component: HomeArticle,
name: 'home.article'
}
]
]
I would like the routes to function as follows:
- /home -> loads HomeIndex
- /home/123 -> Loads HomeArticle with :aid=123
However, VueRouter consistently adds a trailing slash to the parent route path when accessing a child route, resulting in the following behavior:
- /home/ -> loads HomeIndex
- /home/123 -> loads HomeArticle with :aid=123
This poses an issue for me because I am working on an application that has specific SEO requirements mandating no trailing slashes.
It is important to note that I am utilizing named routes for URL generation and route navigation to maintain DRY code practices. While linking directly to "/home" is possible, using route names (e.g., "home.index") is preferred. Storing paths in constants could be an alternative solution, but it restricts the ability to use the 'params' prop alongside the 'path' prop during programmatic navigation.
One potential approach could involve separating HomeIndex as a distinct path rather than making it a child route. However, both HomeIndex and HomeArticle must be loaded within the root HomeBase component.
Are there any suggestions on how I can address this concern? Perhaps through VueRouter hooks or plugins?