vue实现顶部导航栏
实现导航的主要思路为
- 点击某一项的时候拿到相应的index 。
- 然后把这个index赋值给isActiveNum 。
- 再用router-link里面的index去对比。
- 如果一样的话就加上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>