我正在使用Vue和Vue路由器 .
路线
{
path: '/admin', component: AdminPage,
children: [
{path: 'admin-user', component: AdminUser, name: 'admin-user'}
]
},
在 AdminPage
组件中,我有路由器链接及其路由器视图,用于在页面之间导航 . 其中一条路径是路径 admin-user
,它使用 AdminUser
组件 .
AdminPage.vue:
<template>
<div id="adminPage">
<ul id="adminNavList">
<li>... some nav links ...</li>
<li><router-link :to="{ name: 'admin-user', params: {front: true}}">User</router-link></li>
</ul>
<div class="adminViewPort" v-if="isAdmin">
<router-view></router-view>
</div>
</div>
</template>
在 AdminUser
组件中,有两个组件根据条件显示 . 首次加载路径路径并创建 AdminUser
时,默认情况下会显示 AdminUserList
组件 . 当单击触发 show_user_bookings()
按钮的按钮时,将显示另一个组件 AdminUserBookings
. 同样,当用户单击触发 show_user_list()
方法的按钮时,将显示 AdminUserList
组件 .
AdminUser.vue
<template>
<div id="AdminUserWrapper">
<admin-user-list v-if="component_name==='user_list'" :showUserBookings="show_user_bookings"></admin-user-list>
<admin-user-bookings v-if="component_name==='user_bookings'" :show_user_list="show_user_list"></admin-user-bookings>
</div>
</template>
<script>
import AdminUserList from './AdminUserList.vue'
import AdminUserBookings from './AdminUserBookings.vue';
export default {
name: 'AdminUserWrapper',
components: {
AdminUserList, AdminUserBookings
},
data() {
return {
component_name: '',
},
methods: {
show_user_list() {
this.component_name = 'user_list';
},
show_user_bookings() {
this.component_name = 'user_bookings';
}
},
created() {
this.show_user_list();
}
}
</script>
所以问题是,如果显示 AdminUserBookings
组件并单击路径 admin-user
的链接,则不会显示默认组件 AdminUserList
. 有没有办法在 admin-user
请求 admin-user
路径时显示默认组件 AdminUserList
,即使它在显示 AdminUserBookings
组件时已经在 admin-user
路径中?