Javascript 向锚定标记添加活动类

我一直在尝试向当前链接添加一个

.active

类，我知道以前有人在这里问过它，但是，没有一个答案与我的需要完全匹配

这是一个Vue组件。我不想添加vue路由器。我想动态地将活动类添加到单击的链接中

<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>

---

您可以使用VueJs

：类

<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>

您可以使用
hashchange
事件和Vue：

请记住，您必须为每个项目添加
部分
属性，以便它知道要读取的
窗口。位置
属性。
它表示
无法读取未定义的
的属性“名称”。来自
：class
中的item.name，确保有一个名为items的prop或变量。它肯定在那里。我检查编辑的全部错误
TypeError:无法读取VueComponent.current_page_name的未定义属性“name”
抱歉，我尚未测试代码。我只是在心里写的。无论如何，请将
this.$route.name
更改为
this.$router.currentRoute
好，现在可以了。谢谢，这只是一个简单的问题，它是否也适用于
/home，/about
类链接？或者它只是与
一起使用，这将只与
一起使用。如果我想同时使用
/和#
呢。两者都有共同的解决方案吗？有，我已经更新了我的答案。
<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>


<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>

<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>

<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>