Question

我在标题上使用了bootstrap submenu，并且由于某种未知的原因，每次我从登录屏幕router.push到仪表板时，仪表板都会加载标题，bootstrap submenu函数或dropdown-toggle不起作用，要使其正常工作，我只需要在浏览器中手动刷新即可。

我不知道为什么，但是它就像bootstrap submenu之类的事情失败了，因为创建页面时没有加载标头。

为简单起见，我在admin.vue上进行了此配置

<template>
<div>
    <transition 
        enter-active-class="animated fadeInDown "
        leave-active-class="animated fadeOutUp  "
        mode="out-in"
    >
        <router-view name="header"></router-view>
    </transition>

    <transition 
        enter-active-class="animated fadeIn"
        leave-active-class=""
        mode="out-in"
    >
        <router-view></router-view>
    </transition>
</div>
</template>

在我的路由器上，我正在执行登录操作

{ path: '/login',
  name: 'login', 
  components: { default: login },
  meta: { notLoggedIn: true }},

，然后在页面的其余部分为已验证的用户

{ path: '/',
  name: 'dashboard', 
  components: { default: dashboard,'header': header },
  meta: { requiresAuth: true }},

这是我整个标题的一部分

<li class="nav-item dropdown">
    <a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">
        <i class="icon-gear mr-2"></i>
        System
    </a>

    <div class="dropdown-menu">

        <router-link :to="{ name:'userCreate' }" class="dropdown-item" active-class="active" exact v-if="currentUser.can && currentUser.can['create_user']">
            <i class="icon-plus22"></i> Add User
        </router-link>

        <!-- divider -->
        <div class="dropdown-divider"></div> 

        <!-- user -->
        <!-- if board account -->
        <div class="dropdown-submenu" v-show="currentUser.can && currentUser.can['index_user'] && currentUser.id_company == 0">
            <a href="#" class="dropdown-item dropdown-toggle">
                <i class="icon-users"></i> User
            </a>
            <div class="dropdown-menu">

                <router-link :to="{ name: 'userCompany', params:{company:'all'} }" class="dropdown-item" active-class="active" exact >
                    All Company
                </router-link>
                <router-link :to="{ name: 'userCompany', params:{company: currentUser.id_company} }" class="dropdown-item" active-class="active" exact>
                    Board
                </router-link>

                <!-- divider -->
                <div class="dropdown-divider"></div> 

                <template v-for="company in modelCompany">
                    <router-link :to="{ name: 'userCompany', params:{company: company.id} }" class="dropdown-item" active-class="active" exact>
                     {{ company.name }}
                    </router-link>
                </template>

            </div>
        </div>

        <!-- if company account -->
        <router-link :to="{ name: 'userCompany', params:{cu: currentUser.id_company} }" class="dropdown-item" active-class="active" exact v-if="currentUser.can && currentUser.can['index_user'] && currentUser.id_company != 0">
            <i class="icon-users"></i> User
        </router-link>

    </div>
</li>

起初，我认为是因为我在v-for部分上做错了，所以我删除了它们，只保留了所有公司和董事会的路由器链接，但仍然存在相同的问题

然后我认为是因为

v-show="currentUser.can && currentUser.can['index_user'] && currentUser.id_company == 0"

在div dropdown-submenu类上，因此为了进行测试，我将其删除到一个简单的普通dropdown-submenu上，它仍然存在相同的问题...所以现在我只有一个怀疑者...这是因为添加登录后的标头组件是罪魁祸首...

所以有人知道如何解决？也许有一些bootstrap 4 javascript命令告诉下拉菜单以正确的方式重置或重新渲染整个东西？

还是我添加标头组件的方式错误？

Bootstrap下拉切换不适用于Vue Spa

0 个答案: