我想在其他嵌套路由内添加一个嵌套路由。我知道应该使用命名的路由,并且在上一次尝试中,我使路由中的URL正确更改,但是未加载我设置的组件。在线检查,但找不到使其工作的方法。我的路线和组件结构:
路由器:
{
path: "/login",
name: "Login",
component: Login,
meta: {
requiresGuest: true,
},
},
{
path: "/admin",
name: "Admin",
beforeEnter: checkAdminRights,
component: Admin,
children: [
{
path: "/",
name: "welcome",
beforeEnter: checkAdminRights,
component: Welcome,
meta: {
requiresAuth: true,
},
},
{
path: "userspanel",
name: "userspanel",
beforeEnter: checkAdminRights,
component: UsersPanel,
children:[
{
path: 'history/:user_id',
name: 'history',
component: {a: History},
}
]
},
UsersPanel.vue
<div>
<v-simple-table class="mt-5">
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Email</th>
<th class="text-left">Gender</th>
<th class="text-left">History</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.gender }}</td>
<td>
<router-link
:to="{ name: 'history', params: { user_id: user.user_id } }"
>
<v-icon>mdi-file</v-icon>
</router-link>
</td>
</tr>
</tbody>
</v-simple-table>
<v-content>
<v-container fluid>
<router-view name="a" :key="$route.fullPath"></router-view>
</v-container>
</v-content>
<v-overlay :value="overlay">
<v-progress-circular indeterminate size="64"></v-progress-circular>
</v-overlay>
</div>
Admin.vue(已设置主视图路由器)
<v-app-bar
:clipped-left="$vuetify.breakpoint.lgAndUp"
app
color="blue darken-3"
dark
>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title style="width: 300px" class="ml-0 pl-4">
</v-toolbar-title>
<v-spacer></v-spacer>
Logout
<v-btn icon @click="logout">
<v-icon>mdi-logout</v-icon>
</v-btn>
</v-app-bar>
<v-content>
<v-container fluid>
<router-view />
</v-container>
</v-content>
<v-dialog v-model="dialog" width="800px"> </v-dialog>
History.vue
<template>
<div>
<h1>History Section</h1>
<v-card class="mx-auto" max-width="344" outlined>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">OVERLINE</div>
<v-list-item-title class="headline mb-1"
>Headline 5</v-list-item-title
>
<v-list-item-subtitle
>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle
>
</v-list-item-content>
<v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn text>Button</v-btn>
<v-btn text>Button</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style></style>
屏幕截图
谢谢!