使用Tailwind CSS为激活链接添加样式无效问题排查

你的问题出在路由匹配的判断逻辑上，当前代码里的:class="{'link-btn-active' :route('profile.index')}"只会生成profile.index的路由URL字符串，这个值永远为真——所以不管当前页面是不是profile路由，这个样式类都会被加上；而你实际需要的是当前路由匹配时才激活样式，不是单纯判断路由地址存在。

正确实现步骤 #

1. 导入Inertia的路由状态钩子
   在你的Vue组件中引入usePage来获取当前页面的路由信息：

import { usePage } from '@inertiajs/vue3'

2. 获取当前路由数据
   在组件的setup函数中拿到当前页面的路由对象：

const page = usePage()

3. 修正路由匹配判断
   修改Link组件的:class绑定，对比当前路由名称和目标路由名称：

<Link 
  :href="route('profile.index')" 
  class="link-btn" 
  :class="{'link-btn-active': page.props.route.name === 'profile.index'}"
>
  Profiles
</Link>

如果是Vue 2环境，直接用this.$page.props.route.name代替即可。

备选方案：通过URL路径匹配 #

如果不想用路由名称，也可以直接对比当前页面的URL路径（适合路由无参数的场景）：

<Link 
  :href="route('profile.index')" 
  class="link-btn" 
  :class="{'link-btn-active': window.location.pathname === route('profile.index')}"
>
  Profiles
</Link>

Tailwind额外注意事项 #

确保你的自定义样式类link-btn-active没有被Tailwind的树摇机制去掉，需要在tailwind.config.js中配置content，让Tailwind扫描到你的Vue组件文件：

module.exports = {
  content: [
    './resources/js/**/*.vue', // 替换成你的Vue组件实际路径
    './resources/views/**/*.blade.php', // 若使用Laravel模板则保留
  ],
  // ...其他配置项
}

内容的提问来源于stack exchange，提问作者VUELOVER