激活导航链接样式

上一篇内容我们通过加入 tailwindcss 是整个页面看起来漂亮了不少，这篇内容我们将通过激活导航栏链接样式，来了解一下 Laravel 的请求（Request）的功能。

上一篇中我们将导航提取到了 resources/views/components/nav.blade.php 组件中，但是呢，目前导航在点击之后没有激活状态，目前只是写死首页激活，其他两个导航在点击之后并没有激活，所以这集内容将使用 Request 的内容来使 nav 可以动态激活起来。

TIP

可以稍微看一下Laravel Request 请求 文档

初步实现

让我们回到 nav 组件，看一下它的代码

<div {{ $attributes }}>
  <a href="/" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">首页</a>
  <a href="/profile" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">个人资料</a>
  <a href="/contact" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">联系方式</a>
</div>

目前首页链接处于激活状态，从代码中可以抽象出来两个 class 组，一个是激活状态的 class，一个是未激活的 class，去除相同的部分提取之后，如下

• 激活的 class bg-gray-900 text-white
• 未激活的 class text-gray-300 hover:bg-gray-700 hover:text-white

要实现这个功能，我们需要判断当前访问的链接是否是对应的页面，用一个伪代码来表示一下

<div {{ $attributes }}>
  <a href="/" class="{{ 如果是首页 ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}} block rounded-md px-3 py-2 text-base font-medium" aria-current="page">首页</a>
</div>

按照这样的逻辑，我们首先判断访问的链接是否是当前的页面，这里我们需要使用到 Laravel request 的一个方法，就是[检查请求路径/路由 ]https://laravel-docs.catchadmin.com/docs/11/basics/requests#检查请求路径-路由

request()->is(string $path);

通过这个方式来实现一下这个效果，代码如下

<div {{ $attributes }}>
  <a href="/" class="{{ request()->is('/') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}} block rounded-md px-3 py-2 text-base font-medium" aria-current="page">
    首页
  </a>
  <a href="/profile" class="{{ request()->is('profile') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}} block rounded-md px-3 py-2 text-base font-medium">个人资料</a>
  <a href="/contact" class="{{ request()->is('contact') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}} block rounded-md px-3 py-2 text-base font-medium">联系方式</a>
</div>

来看一下效果，现在点击个人资料就可以激活其导航状态了。ok，非常简单，效果已经可以完成了

进一步优化

目前已经完成了我们想要达到的效果，但是这里还有一点点的小缺陷。还是回到之后说的，如果导航的链接变多了之后，这个 nav 组件就会变得很臃肿，因为这一段代码的逻辑都是一样的，class 也是一样的，所以我们在这里需要优化一下，将每个 link，就是导航链接啊，再次做成一个小组件。我们创建一个 link 组件。resources/views/components/nav-link.blade.php 文件。就是一个 a 链接

<a class="{{ request()->is('/') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}} block rounded-md px-3 py-2 text-base font-medium" {{ $attributes }}>{{ $slot }}</a>

首先我们先不需要管这个 request()->is('/') 条件判断，这个 nav-link 组件啊，是需要一个 $attributes 变量，他呢可以通过组件传递一个属性过来，例如这里就是需要一个 href 属性，slot 这里就是导航的 title 嘛，回到 nav 组件，改到使用导航链接组件的代码

<div {{ $attributes }}>
  <x-nav-link href="/">首页</x-nav-link>
  <x-nav-link href="/profile">个人资料</x-nav-link>
  <x-nav-link href="/contact">联系方式</x-nav-link>
</div>

这样就变得更加简洁了。这里再回到 nav-link 组件，下面在代码注释里面说明

<!--1. 这里首先将 request()->is('/') 改成一个变量 例如 `active`-->
<!--2. 然后呢通过组件上将 active 变量传递进来是不是就可以了呢？-->
<!--3. 所以这里我们需要使用一个 blade 模板指令  @props -->

@props(['active' => false]) // [!code ++]

<a class="{{ $active ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}} block rounded-md px-3 py-2 text-base font-medium" {{ $attributes }}>{{ $slot }}</a>

TIP

注意 active 这里是一个 boolean 类型

nav-link 组件就已经完成了。我们在回到 nav 组件，我们使用 active 来看看，如果你直接使用模板渲染的模式下，直接在组件上使用 active 属性

<div {{ $attributes }}>
  <x-nav-link href="/" active="{{ request()->is('/') }}">首页</x-nav-link>
  <x-nav-link href="/profile" active="{{ request()->is('profile') }}">个人资料</x-nav-link>
  <x-nav-link href="/contact" active="{{ request()->is('contact') }}">联系方式</x-nav-link>
</div>

如果你传递的是一个变量，那么你就需要在 active 前面加上冒号 :

<div {{ $attributes }}>
  <x-nav-link href="/" :active="request()->is('/')">首页</x-nav-link>
  <x-nav-link href="/profile" :active="request()->is('profile')">个人资料</x-nav-link>
  <x-nav-link href="/contact" :active="request()->is('contact')">联系方式</x-nav-link>
</div>

ok，这一节又结束了。这一节中呢

• 我们再一次深入了组件的封装，我们学到要尽量讲页面上共同的部分封装成组件的方式来调用
• 我们第一次接触到 Laravel Request 组件，可以用来判断是否访问的当前页面
• 我们学了组件 @props 指令，可以通过该指令使组件之间可以通信（传递变量值）