Vue Router Wildcard going to wrong path

Question

I have a simple Vue router setup from Laravel. I am trying to add a wildcard route because of a component that I will be using needs it. My Routes are:

import Dashboard from '@/components/Dashboard'
import MyFiles from '@/components/MyFiles'
import Error403 from '@/components/Error403'
import Error404 from '@/components/Error404'

export default [
    {
        name: 'index',
        path: '/',
        redirect: {
            name: 'dashboard',
        }
    },
    {
        name: 'dashboard',
        path: '/dashboard',
        component: Dashboard,
        props: true,
    },
    {
        name: 'files',
        path: '/dashboard/files/*', //Note the wildcard here.
        component: MyFiles,
        props: true,
    },
    {
        name: '403',
        path: '/403',
        component: Error403,
    },
    {
        name: '404',
        path: '/404',
        component: Error404,
    },
    {
        name: 'catch-all',
        path: '*',
        component: Error404,
    },
]

Everything appears to work. But when I click on my router-link for 'files' route. It goes to / and does not redirect but shows the files components. Very confusing... Additionally I have this error in console:

[vue-router] missing param for named route "files": Expected "0" to be defined

Has anyone ran into this problem? Im very stumped as what to do. Any direction would be appreciated.

ADDITIONALLY

Here is the router-link that is the problem. Note that this is in a Blade File. the params are just strings.

    <router-link
        class="nav-link"
        exact-active-class="active"
        :to="{ name: 'files', params: { endpoint: '{{ route('myFiles') }}', endpointget: '{{ route('myFiles.get') }}' } }"
    >
        {{__('My Files')}}
    </router-link>

What does the URL look like when you click on the route that takes you to files? I'm assuming since the wildcard here is expecting at least one path param to be passed. — Azhar Mohamed
@ Azhar Mohamed, Do you mean the actual URL when I click the router-link? It goes to the Root of my application '/', — Zach C.

Ignacio Ignacio · Accepted Answer · 2020-01-18T03:08:25

Please reorder your routes.

The two last routes needs to be this

[{path: '/404'}, {path: '/'}, {path: *}]

From the more especific, to the more generic, thats it the correct match.

Next, i think if you remove "name" in the route * or in files route maybe fix the problem.

Vue Router Wildcard going to wrong path

1 Answers