<>vue Implement top navigation bar
<> The main idea to realize navigation is
* Click on an item to get the corresponding index .
* And put this index Assign to isActiveNum .
* Reuse router-link Inside index De comparison .
* If it's the same, add isActive class Otherwise, the class name is empty . <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: " home page ", link:
"/home" }, { menu: " works ", link: "/works" }, { menu: " Want to say ", link: "/wantsay" }, {
menu: " about ", link: "/about" }, ]); const list = toRaw(menuList); onMounted(() =>
{}); const btnMenu = (index) => { isActiveNum.value = index; }; return {
btnMenu, isActiveNum, list }; }, }; </script> <style scoped> .isActive { color:
#f23051; } </style>
Technology