I ran into an issue, while debugging a route inside a component:
Inside my Navbar.vue component I have:
<v-list-group>
<template v-slot:activator="{ props }">
<v-list-item
v-bind="props"
title="All Projects">
</v-list-item>
</template>
<v-list-item v-for="project in projects"
:to="{name: 'project/folders', params: {projectId: project.id}}"
:title="project.id">
</v-list-item>
</v-list-group>
In my router.js i have a few different routes:
{
name: 'project',
path: "/project/folders/project/:projectId?/:matchRest(.*)*",
component: () => import("./components/FoldersOverview1.vue"),
props: true,
},
{
name: 'project/folders',
path: "/project/folders/project/:projectId?/:matchRest(.*)*",
component: () => import("./components/FoldersOverview2.vue"),
props: true,
}
When I navigate to /project/folders/project/1234
I would expect Vuetify to expand the v-list-group and to highlight the v-list-item, as the named route in the :to property of the v-list-item is project/folders
BUT I experience that this is not what is happening...
The v-list-item list not beeing highlighted.
When I adapt my routes to:
{
name: 'project',
path: "/project/folders/project/:projectId?/:matchRest(.*)*",
component: () => import("./components/FoldersOverview1.vue"),
props: true,
},
{
name: 'project/folders',
path: "/project/folders/project/:projectId?/",
component: () => import("./components/FoldersOverview2.vue"),
props: true,
}
The list-item-group expands and the corresponding v-list-item is indeed highlighted.
My thoughs:
The first route named project does match,
but I suppose it also matches the second route project/folders
- which is more strict than the first one, and everything works as expected in the same example. Is this correct?
Could somebody maybe explain, why the v-list-item with
:to="{name: 'project/folders', params: {projectId: project.id}}"
does only match the second route when :matchRest(.*)* is omitted? Shouldn`t both routes be matched anyway?