vue实现顶部导航栏

vue实现顶部导航栏

实现导航的主要思路为

1. 点击某一项的时候拿到相应的index 。
2. 然后把这个index赋值给isActiveNum 。
3. 再用router-link里面的index去对比。
4. 如果一样的话就加上isActive类 否则类名为空。

<div class="nav">
      <ul
        @click="() => this.btnMenu(index)"
        v-for="(item, index) in this.list"
        :key="item.index"
      >
        <li>
          <router-link
            :class="this.isActiveNum === index ? 'isActive' : ''"
            :to="item.link"
            >{{ item.menu }}</router-link
          >
        </li>
      </ul>
    </div>

<script>
import { reactive, toRaw, ref, onMounted } from "vue";
export default {
  setup() {
    const isActiveNum = ref(0);
    const menuList = reactive([
      { menu: "首页", link: "/home" },
      { menu: "作品", link: "/works" },
      { menu: "想说", link: "/wantsay" },
      { menu: "关于", link: "/about" },
    ]);
    const list = toRaw(menuList);
    onMounted(() => {});
    const btnMenu = (index) => {
      isActiveNum.value = index;
    };
    return {  btnMenu, isActiveNum,  list };
  },
};
</script>

<style scoped>
	.isActive {
  color: #f23051;
}
</style>