Vue 路由器不会重定向到欢迎页面，如果 404 页面定义了别名 *

Question

我有以下路由配置。我希望路由器在进入没有任何 url 扩展名的页面时将客户端重定向到/dashboard。但是，它显示 404 页面。 如果我注释掉 404 页面的alias: '*'(从技术上讲，它在我的理解中禁用了它(，重定向将按预期工作。

function configRoutes() {
return [
{
path: '/',
redirect: '/dashboard',
name: 'Home',
component: TheContainer,
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: Dashboard
},
{
path: 'pickingList/:roleID-:roleName/:viewID-:viewName',
name: 'Kommissionierliste',
component: PickingList
},
{
path: 'admin/clients',
name: 'Clients',
component: AdminClients,
meta: {
requiresUserGroup: 'admin'
},
children: [
{
path: ':id-:name',
name: 'Clienteinstellungen',
component: AdminClientSettings,
meta: {}
}
]
},
{
path: 'admin/roles',
name: 'Rollen',
component: AdminRoles,
meta: {
requiresUserGroup: 'admin'
},
children: [
{
path: ':id-:name',
name: 'Rolleneinstellungen',
component: AdminRoleSettings,
meta: {}
}
]
},
{
path: 'login',
name: 'Login',
component: Login
},
{
path: 'admin/viewers',
name: 'Ansichten',
component: AdminViewerRoles,
meta: {
requiresUserGroup: 'admin'
},
children: [
{
path: ':id-:name',
name: 'Ansichtseinstellungen',
component: AdminViewerRoleSettings,
meta: {}
}
]
},
{
path: '404',
name: 'PageNotFound',
component: PageNotFound,
alias: '*',
meta: {
label: 'Seite nicht gefunden'
}
}
]
}
]
}

我该如何解决这个问题？

Answer 1

您应该将树中的 404 页面向上移动以脱离任何children数组，删除其别名，并将其路径设置为*。catch-all路由应始终位于路由列表中的最后(否则它将隐藏数组中在其后面列出的所有路由(。

---

变体 1 - 所有路由都由容器包装

App.vue

<template>
<TheContainer>
<MySidebar slot="sidebar" />
<router-view />
</TheContainer>
</template>

变体 2 - 每个路由中的自定义布局

App.vue

<template>
<router-view />
</template>

路线 A

<template>
<LayoutA>
<Sidebar slot="side" />
<Toolbar slot="top" />
<!-- content specific to the route -->
</LayoutA>
</template>

路线B

<template>
<LayoutY>
<MyToolbar slot="top" />
<!-- content for this route -->
<MyFooter slot="bottom" />
</LayoutY>
</template>