Question

我正在使用Vue和Vue-router。

路由

{
    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。有什么方法可以在AdminUserList请求admin-user路径时显示默认组件AdminPage，即使admin-user路径已经在AdminUserBookings路径<asp:DropDownList ID="lblReadyTime" runat="server" DataTextFormatString="{0:htt}" SelectedValue='<%#Bind("ReadyTime", "{0:htt}")%>'> <asp:ListItem Text="12AM" Value="12AM" /> <asp:ListItem Text="1AM" Value="1AM" /> <asp:ListItem Text="2AM" Value="2AM" /> <asp:ListItem Text="3AM" Value="3AM" /> <asp:ListItem Text="4AM" Value="4AM" /> <asp:ListItem Text="5AM" Value="5AM" /> <asp:ListItem Text="6AM" Value="6AM" /> <asp:ListItem Text="7AM" Value="7AM" /> <asp:ListItem Text="8AM" Value="8AM" /> <asp:ListItem Text="9AM" Value="9AM" /> <asp:ListItem Text="10AM" Value="10AM" /> <asp:ListItem Text="11AM" Value="11AM" /> <asp:ListItem Text="12PM" Value="12PM" /> <asp:ListItem Text="1PM" Value="1PM" /> <asp:ListItem Text="2PM" Value="2PM" /> <asp:ListItem Text="3PM" Value="3PM" /> <asp:ListItem Text="4PM" Value="4PM" /> <asp:ListItem Text="5PM" Value="5PM" /> <asp:ListItem Text="6PM" Value="6PM" /> <asp:ListItem Text="7PM" Value="7PM" /> <asp:ListItem Text="8PM" Value="8PM" /> <asp:ListItem Text="9PM" Value="9PM" /> <asp:ListItem Text="10PM" Value="10PM" /> <asp:ListItem Text="11PM" Value="11PM" /> </asp:DropDownList>组件显示？

每次单击路由器链接时，始终呈现默认组件

0 个答案: