单击链接并重定向时，如何添加活动类？

Posted 2023-02-22

【中文标题】单击链接并重定向时，如何添加活动类？

【英文标题】：How can I add class active when a link clicked and redirect?

【发布时间】：2017-08-23 20:57:38

【问题描述】：

我的vue组件是这样的：

<template>
    <div>
        ...
        <div class="list-group">
            <a :href="baseUrl+'/message/inbox'" class="list-group-item">
                Message
            </a>
            <a :href="baseUrl+'/message/review'" class="list-group-item">
                Review
            </a>
            <a :href="baseUrl+'/message/resolution'" class="list-group-item">
                Resolution
            </a>
        </div>
        ...
    </div>
</template>
<script>
    export default 
        ...
        data() 
            return 
                baseUrl: window.Laravel.baseUrl
            
        ,
        ...
    
</script>

当链接被点击时，它会调用url，我想在重新加载页面后在点击的链接上添加活动类。

但是，我还是一头雾水，怎么办？

【参考方案1】：

除了 Leo 的回答之外，最好引入一个自动检测是否处于活动状态的组件，这样您就不需要编写一堆 <a> 元素和许多重复的属性。

例如<custom-link> 组件：

<custom-link href="/message/inbox" class="list-group-item">
  Message
</custom-link>
<custom-link href="/message/review" class="list-group-item">
  Review
</custom-link>
<custom-link href="/message/resolution" class="list-group-item">
  Resolution
</custom-link>

如果你不需要在其他组件中复用这个组件或者list-group-item类总是需要的，你也可以把这个类封装到<custom-link>中。它看起来会更干净：

<custom-link href="/message/inbox">Message</custom-link>
<custom-link href="/message/review">Review</custom-link>
<custom-link href="/message/resolution">Resolution</custom-link>

custom-link 的代码如下：

<a
  :href="baseUrl + href"
  :class=" active: isActive "
  class="list-group-item"
>
  <slot></slot>
</a>


  props: ['href'],
  data: () => ( baseUrl: window.Laravel.baseUrl ),
  computed: 
    isActive () 
      return location.href === this.baseUrl + this.href
    
  

我这里直接使用location.href，如果你需要一些计算来获取当前URL，你也可以使用像Leo的例子这样的计算属性。

【参考方案2】：

您可以添加一个计算属性，例如currentPath：

computed: 
  currentPath () 
    // grab current url and return the part after `baseUrl `
    // e.g. '/message/inbox' or '/message/review'
    return '/message/inbox'
  

还有一个适合你特殊风格的 CSS 类：

.active-item 
  /* key-value pairs here */

然后在您的模板中，您可以将类应用于匹配的项目：

<a :href="baseUrl+'/message/inbox'"
   :class=" 'active-item': currentPath === '/message/inbox'">
   class="list-group-item">Message</a>
<a :href="baseUrl+'/message/review'"
   :class=" 'active-item': currentPath === '/message/review'">
   class="list-group-item">Review</a>

请阅读binding html classes with object syntax上的文档

【讨论】：

除了我有一个链接：/message/inbox，我还有一个链接：/message/inbox/detail。所以具有相同菜单的链接，菜单是消息菜单。点击/message/inbox或/message/inbox/detail时如何订购消息菜单

/message/inbox 和 /message/inbox/detail 是一个特殊情况。我可以简单地使用currentPath.indexOf('/message/inbox') === 0 之类的东西。但是，如果它没有那么简单，那么您可能需要明确一件事：在您的上下文中 active 的定义是什么？您应该能够抽象地回答它，而不是具体案例。这就是你的策略和解决方案的方式。

换句话说，你的代码/算法应该能够解决一组问题（这里是路径匹配），而不是逐个处理。这里的关键是描述这些问题的共性，而不是每个案例。