我正在使用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 路径中?