将当前页面显示在菜单栏上的粗体中

Question

当我单击一个菜单项并被带到该页面时，如何使该菜单项现在显示为粗体(或不同的颜色)？

例如，如果我单击“产品”，当它加载到/product页面时，我希望菜单上的“产品”现在以粗体显示。

如果这是一个简单的任务，我很抱歉，我是Vue和Nuxtjs的新手。

<template>
  <div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline">
              <a
                href="/product"
                class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >Product
              </a>
              <a
                href="/linkone"
                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >Title One
              </a>
              <a
                href="/linktwo"
                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >Title Two
              </a>
              <!--              <a-->
              <!--                href="/pricing"-->
              <!--                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"-->
              <!--                >Pricing-->
              <!--              </a>-->
              <a
                href="/about"
                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >About
              </a>
            </div>
          </div>
        </div>
        <div class="-mr-2 flex md:hidden">
          <!-- Mobile menu button -->
          <button
            type="button"
            class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
            id="main-menu"
            aria-label="Main menu"
            aria-haspopup="true"
          >
            <!-- Menu open: "hidden", Menu closed: "block" -->
            <svg
              class="block h-6 w-6"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
            <!-- Menu open: "block", Menu closed: "hidden" -->
            <svg
              class="hidden h-6 w-6"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

​

Answer 1

一个简单的解决方案可以在你的链接中找到：

<a
    href="/product"
    class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
    :class="{ 'font-bold':(window.location.pathname === '/product') }"
>
    Product
</a>

所做的就是，如果href的当前路径名与链接匹配，则应用font-bold类。希望这对你有用！

*编辑*

我想我忘记了window在模板中不可用，但我相信route是可用的，所以您可以使用$route.path而不是window.location.pathname