Vue路由器通配符使用错误的路径

问题描述 投票:0回答:1

我有一个来自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”

有人遇到这个问题吗?我很沮丧。任何方向将不胜感激。

ADDITIONALLY

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

    <router-link
        class="nav-link"
        exact-active-class="active"
        :to="{ name: 'files', params: { endpoint: '{{ route('myFiles') }}', endpointget: '{{ route('myFiles.get') }}' } }"
    >
        {{__('My Files')}}
    </router-link>
vue.js wildcard vue-router
1个回答
0
投票

请重新排列您的路线。

最后两条路线必须是这个

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

从更具体的到更通用的,这就是正确的匹配。

接下来,我想如果您删除路由*或文件路由中的“名称”,可能会解决此问题。

© www.soinside.com 2019 - 2024. All rights reserved.