Vue3单文件组件中如何在:class条件语句内访问元素实例

别费劲拿元素实例了，换个思路 #

你之前的写法不生效，是因为:class的绑定值是表达式的求值结果，不是事件回调——你写的(el) => subIsActive(el)只是定义了个函数，根本没执行，而且这种场景下也没法直接拿到元素实例。

其实完全不需要访问元素就能实现需求，下面给你两种方案：

方案一：直接用RouterLink自带的激活类 #

Vue Router的RouterLink组件自带激活状态管理，默认会给匹配的链接加两个类：

• router-link-active：当前路由包含目标路径（非精确匹配）时生效
• router-link-exact-active：当前路由和目标路径完全匹配时生效

直接在CSS里写这两个类的样式就行，不用自己写判断逻辑，这是最省心的方案。

方案二：自定义激活判断逻辑 #

如果自带的类满足不了你的需求，比如需要更复杂的匹配规则，就用当前路由信息来判断：

1. 先在组件里获取当前路由对象：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    // 自定义判断函数，传入目标路径，返回是否激活
    const subIsActive = (targetPath) => {
      // 这里写你的匹配规则，比如判断当前路径是否以目标路径开头
      return route.path.startsWith(targetPath)
      // 也可以根据需求调整为：route.path.includes(targetPath)
    }

    return { subIsActive }
  }
}

2. 然后在模板里直接把to的路径传给判断函数：

<RouterLink to="/post-container" :class="{ 'is-active': subIsActive('/post-container') }">
  Link Name
</RouterLink>

这样就能根据你自定义的规则给匹配的链接加上is-active类了。

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