Question

我已经在Laravel + vue项目中使用npm安装了AminLte v3，广告效果很好，但是当我单击标签为的Side navbar主菜单时

<li class="nav-item has-treeview">
    <a href="#" class="nav-link">
        <i class="nav-icon fas fa-users"></i>
        <p>
            Members
            <i class="fas fa-angle-left right"></i>
            <span class="badge badge-warning right">new:2</span>
        </p>
    </a>
    <ul class="nav nav-treeview">
        <li class="nav-item">
            <router-link :to="{name : 'members'}" class="nav-link">
                <i class="fas fa-user-check nav-icon"></i>
                <p>All</p>
            </router-link>
        </li>
        <li class="nav-item">
            <router-link :to="{name:'membersLatest'}" class="nav-link">
                <i class="fas fa-user-plus nav-icon"></i>
                <span class="badge badge-danger right">2</span>
                <p>Latest</p>
            </router-link>
        </li>
        <li class="nav-item">
            <router-link :to="{name:'membersPending'}" class="nav-link">
                <i class="fas fa-user-clock nav-icon"></i>
                <p>Pending</p>
            </router-link>
        </li>
        <li class="nav-item">
            <router-link :to="{name:'membersSuspended'}" class="nav-link">
                <i class="fas fa-user-lock"></i>
                <span class="badge badge-danger right">2</span>
                <p>Suspended</p>
            </router-link>
        </li>
    </ul>
</li>

它将我重定向到#的路由器路径，

<a href="#" class="nav-link">
    <i class="nav-icon fas fa-users"></i>
    <p>
        Members
        <i class="fas fa-angle-left right"></i>
        <span class="badge badge-warning right">new:2</span>
    </p>
</a>

这部分内容并没有在主菜单中打开子菜单，我从另一个vue组件中包含了navBar。

任何人都可以提出一个解决方案吗？

Answer 1

当您点击其他路线而不是允许路线时，树视图选择器无法找到该元素。当您按下url重定向到adminlte时，树视图将不起作用，因为选择器是在元素安装之前定义的。

要解决此问题，请在侧边栏组件中定义一个已安装的挂钩。

mounted(){
   $('[data-widget="treeview"]').Treeview('init');
}

Answer 2

在 bootstrap.js 文件中将 require('admin-lte') 放在下面 require('bootstrap')

侧边栏菜单在Laravel + Vue + Adminlte中不起作用

2 个答案: