将活动类添加到锚标签

Question

我一直在尝试将.active 类添加到当前链接，并且我知道这里之前有人问过它，但是似乎没有一个答案完全符合我的需要。

这是一个 Vue 组件。我不想添加 vue-router。我想将活动类动态添加到单击的任何链接。

<template>
  <nav>
    <ul>
      <li v-for="(item, $index) in items" :key="$index" >
        <a :href="item.link">{{ item.name }}</a>     //how do I dynamically add the active class here?
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "Navbar",
  props: {
    items: {
      type: Array,
      default: null,
    },
  },
}
</script>

<style>
 ul li .active {
   background-color: red;
   cursor: pointer;
 }
</style>

链接列表：

const items = [
  {
    name: "Home",
    link: "#home",
  },
  { 
    name: "About", 
    link: "#about" 
  },
  {
    name: "Contacts",
    link: "#contact",
  },
];

Answer 1

你可以利用hashchange事件和Vue的class binding：

<template>
    <nav>
        <ul>
            <li v-for="(item, $index) in items" :key="$index">
                <a :href="item.link" :class="{ active: hash === item.link }">{{ item.name }}</a>
            </li>
        </ul>
    </nav>
</template>

<script>
export default {
    name: 'Navbar',

    props: {
        items: {
            type: Array,
            default: null,
        },
    },

    data() {
        return {
            hash: window.location.hash,
        };
    },

    created() {
        window.addEventListener('hashchange', () => {
            this.hash = window.location.hash;
        });
    },
};
</script>

<style>
ul li .active {
    background-color: red;
    cursor: pointer;
    font-weight: bold;
}
</style>

---

另一种解决方案是使用click 事件和setTimeout。

立即使用setTimeout 将只是push the evaluation to the back of the queue，这意味着它会等待URL 更新在读取它之前。没有这个，方法总是会落后一步。

这是一个例子：

<template>
    <nav>
        <ul>
            <li v-for="(item, $index) in items" :key="$index">
                <a
                    @click="setUrlSection(item.section)"
                    :href="item.link"
                    :class="{ active: urlSection === item.link }"
                    >{{ item.name }}</a
                >
            </li>
        </ul>
    </nav>
</template>

<script>
export default {
    name: 'Navbar',

    data() {
        return {
            items: [
                {
                    name: 'Home',
                    link: '#home',
                    section: 'hash',
                },
                {
                    name: 'About',
                    link: '/about',
                    section: 'pathname',
                },
                {
                    name: 'Contacts',
                    link: '#contact',
                    section: 'hash',
                },
            ],
            urlSection: window.location.hash || window.location.pathname,
        };
    },

    methods: {
        setUrlSection(section) {
            setTimeout(() => (this.urlSection = window.location[section]));
        },
    },
};
</script>

<style>
ul li .active {
    background-color: red;
    cursor: pointer;
    font-weight: bold;
}
</style>

请记住，您必须为每个项目添加一个 section 属性，以便它知道要读取哪个 window.location 属性。

Answer 2

您可以使用 VueJs :class

<template>
  <nav>
    <ul>
      <li v-for="(item, $index) in items" :key="$index" >
        <a :href="item.link" :class="{'active': current_page_name == item.name }">{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>


<script>
export default {
  computed: {
    current_page_name() {
        return this.$route.name;
    }
  }
}
</script>

如果您不想使用vue-router，您将不得不编写更多代码。 这是示例

<script>
export default {
  data(){
    return {
      url: '',
    }
  },
  computed: {
    current_page_name() {

      if(this.url){
        var URL = this.url;
        var arr=URL.split('/');
        var route_name = arr[1]; // i think zero is the domain, then 1 is the page name,
        return route_name;
      }

      return '';
    }
  },

  mounted(){
    this.url = window.location.href;
  }
}
</script>