侧边栏菜单在 Laravel+vue+adminlte 中不起作用

Posted 2023-02-22

【中文标题】侧边栏菜单在 Laravel+vue+adminlte 中不起作用

【英文标题】：Sidebar menu not working in Laravel+vue+adminlte

【发布时间】：2020-03-22 15:44:59

【问题描述】：

我在我的 Laravel + vue 项目中使用 npm 安装了 AminLte v3，一切都很好，但是当我点击标记为的侧导航栏主菜单时

<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。

谁能告诉我如何解决这个问题？

【问题讨论】：

请创建 sn-p 以便我们为您提供帮助 :)

Snippest 是不可能的，因为它在 .html 文件中作为预览工作在这里 adminlte.io/themes/AdminLTE/index2.html

【参考方案1】：

当您点击另一条路线而不是准入路线时，树视图选择器无法找到该元素。当您推送 url 以重定向到 adminlte 时，树视图将不起作用，因为选择器是在安装元素之前定义的。

为了解决这个问题，在侧边栏组件中定义一个挂载的钩子。

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

【参考方案2】：

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