Question

我有一个有关简单的在线书店的Vue单页应用程序。到目前为止，该项目运行良好，除了一个小问题：登录客户单击导航栏上的“注销”链接时，系统将其导航到首页，并且“注销”链接变为“注册/登录”链接。该链接应该是一个下拉列表，但导航后，该链接将不再起作用（单击时无响应），直到按F5键从“服务器”重新加载页面为止。以下是我的navbar.vue

<template>
    ...
    <!---Good Dropdown--->
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownShowMenuLink" 
                role="button" data-toggle="dropdown" 
                aria-haspopup="true" aria-expanded="false">
        Showroom
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownShowMenuLink">
            <router-link class="dropdown-item" to="/showBookList/newAddings">By Updates</router-link>
            <router-link class="dropdown-item" to="/showBookList/authors">By Authors</router-link>
            <router-link class="dropdown-item" to="/showBookList/categories">By Categories</router-link>
        </div>
    </li>       


    <template v-if="isLogin">
        <li class="nav-item"> 
            <a class="nav-link" id="logoutLink" href="javascript:void(0)" @click="logout">logout</a>
        </li>
        <template v-if="isAdmin">                               
            <li class="nav-item">
                <router-link class="nav-link" to="/admin">Dashboard</router-link>
            </li>                               
        </template>
    </template>
    <template v-else>   
        <!--Bad dropdown-->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdownUserMenuLink" 
                role="button" data-toggle="dropdown" 
                aria-haspopup="true" aria-expanded="false">
                    Login/Register</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownUserMenuLink">
                <router-link class="dropdown-item" to="/loginForm">Sign In</router-link>
                <router-link class="dropdown-item" to="/registerForm">Sign Up</router-link>                                
            </div>
        </li>                            
    </template> 
    ...
</template>

<script>
    import configs from '@/configs'

    export default{
        ...

        methods{
            async logout(){
                let logoutURL = configs.serverURL + configs.serverPort + '/logout';
                await this.$store.dispatch('logout', {logoutURL});
                alert(this.$store.getters.currentMsg);                
                this.$router.push('/');            
            },
        },

        ...
    }
</script>

Answer 1

我想出了一种简单的解决方法：

使用v-show而不是v-if呈现引导程序下拉列表。

           <li v-show="!isLogin" class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownUserMenuLink" 
                    role="button" data-toggle="dropdown" 
                    aria-haspopup="true" aria-expanded="false">
                        Login/Register</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownUserMenuLink">
                    <router-link class="dropdown-item" to="/loginForm">Sign In</router-link>
                    <router-link class="dropdown-item" to="/registerForm">Sign Up</router-link>                                
                </div>
            </li>

根据Vue2的准则：

v-if是“真实的”条件渲染，因为它确保条件块内的事件侦听器和子组件已正确销毁并在切换期间重新创建。相比之下，v-show更为简单-通过基于CSS的切换，始终可以呈现元素（无论初始条件如何）。

我认为重新创建“下拉列表”时错了。也许有人可以帮助我弄清楚如何使用“ v-if”。

VueJS：导航到其他页面时，导航栏上的下拉菜单不起作用

1 个答案: