What is vue router :matchRest(.*)* and when should I use it?

11 views Asked by At

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?

0

There are 0 answers