如何使用 Alpine.js 在当前 url 菜单项上添加活动类

Question

<li><a href="/" class="nav-item active">Home</a></li>
<li><a href="/about" class="nav-item">About</a></li>
<li><a href="/contact" class="nav-item">Contact</a></li>
<li><a href="/services" class="nav-item">Services</a></li>

假设我们有一个导航，目前我们位于主页（路径='/'），我想要的是当我使用Alpine访问关于页面时将相同的活动类添加到关于（路径='/about'）。 js

预期产出将是

<li><a href="/" class="nav-item">Home</a></li>
<li><a href="/about" class="nav-item active">About</a></li>
<li><a href="/contact" class="nav-item">Contact</a></li>
<li><a href="/services" class="nav-item">Services</a></li>

我已经在 Google 上搜索过，但只在点击 Alpine.js 时找到了。我已经有了子菜单 示例：

 <ul x-show="linkActive" x-cloak x-collapse.duration.300ms class="text-gray-400">
                <!-- start::Submenu link -->
                <li
                    class="cursor-pointer py-2 pl-10 pr-6 transition duration-200 hover:bg-black hover:bg-opacity-30 text-gary-200 hover:text-white">
                    <a href="{{route('admin.products.index')}}" class="flex items-center">
                        <span class="mr-2 text-sm">&bull;</span>
                        <span class="overflow-ellipsis">All Products</span>
                    </a>
                </li>
                <!-- end::Submenu link -->

                <!-- start::Submenu link -->
                <li
                    class="cursor-pointer py-2 pl-10 pr-6 transition duration-200 hover:bg-black hover:bg-opacity-30 text-gary-200 hover:text-white">
                    <a href="./pages/email/viewMessage.html" class="flex items-center">
                        <span class="mr-2 text-sm">&bull;</span>
                        <span class="overflow-ellipsis">Category</span>
                    </a>
                </li>
                <!-- end::Submenu link -->

                <!-- start::Submenu link -->
                <li
                    class="cursor-pointer py-2 pl-10 pr-6 transition duration-200 hover:bg-black hover:bg-opacity-30 text-gary-200 hover:text-white">
                    <a href="./pages/email/newMessage.html" class="flex items-center">
                        <span class="mr-2 text-sm">&bull;</span>
                        <span class="overflow-ellipsis">Tags</span>
                    </a>
                </li>
                <!-- end::Submenu link -->
            </ul>

Answer 1

在你的 html/view 文件中

<li><a href="/contact" class="nav-item" x-data:class="$store.pageName === 'contact' && 'active'">Contact</a></li>

在你的 alpinejs 初始化代码中

document.addEventListener('alpine:init', () => {
  Alpine.store('pageName', {
    pageName: 'contact'
  });
})