VueJS: выпадающий на панели навигации не работает при переходе на другую страницу

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».