Vue路由器通配符会走错路

Question

我有一个来自 Laravel 的简单 Vue 路由器设置。我正在尝试添加通配符路由，因为我将使用的组件需要它。我的路线是：

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,
    },
]

似乎一切正常。但是，当我单击“文件”路由的路由器链接时。它转到 / 并且不重定向但显示文件组件。很混乱... 另外我在控制台中有这个错误：

[vue-router] 缺少命名路由“文件”的参数：预期要定义“0”

有人遇到过这个问题吗？我很困惑该怎么做。任何方向将不胜感激。

额外

这是问题所在的路由器链接。请注意，这是在刀片文件中。参数只是字符串。

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

Answer 1

请重新排列您的路线。

最后两条路线需要是这样的

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

从更具体到更通用，这才是正确的匹配。

接下来，我认为如果您在路由 * 或文件路由中删除“名称”可能会解决问题。