使用 vue.js，如何将活动标签设置为当前活动路径？

Question

在我的模板中，我有


      <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
          <router-link
            :to="{
            name: 'ConversationDetailHighlights',
            params: {
              id: conversation.id
            }
          }"
            class="nav-link"
            active-class="active"
            v-bind:class="{active: currentlyActive === 'ConversationDetailHighlights'}"
          >Highlights</router-link>
        </li>
        <li class="nav-item">
          <router-link
            :to="{
            name: 'ConversationDetailFullTranscript',
            params: {
              id: conversation.id
            }
          }"
            class="nav-link"
            active-class="active"
            v-bind:class="{active: currentlyActive === 'ConversationDetailFullTranscript'}"
          >Full Transcript</router-link>
        </li>
      </ul>

在我的脚本中：

  data() {
    return {currentlyActive = 'ConversationDetailHighlights'}
  }
  watch: {
    $route(to) {
      this.currentlyActive = to.name;
    }
  },
  mounted() {
    this.currentlyActive = this.$route.name;
  },

但是，当我单击 Transcript 时，两个 li 都是 active。如何让 highlights 变为非活动状态？

Answer 1

你做的太复杂了。 vue-router 已包含在活动 <router-link> 组件上设置 css-class 所需的所有内容。

引用自Getting Started

Notice that a automatically gets the .router-link-active class when its target route is matched. You can learn more about it in its API reference.

所以您需要做的就是设置您使用 active-class 属性选择的 .active css-class 的样式。

注意多次路由可能同时匹配。例如。 / 将始终匹配。在那种情况下，您应该输入确切的属性：

<router-link to="/" exact active-class="active" />

使用 vue.js，如何将活动标签设置为当前活动路径？

With vue.js, how do I set an active tag to the currently active path?

javascript

vue.js

routerlink