I have been working on integrating a Vue Router into my navbar and everything seemed to be going well. You can check out the code here. The navigation menu I created works perfectly, allowing users to navigate between the home template and about template with just a click.
<template id="navigation">
<div>
<router-link to="/" class="">Home </router-link>
<router-link to="/about" class="">About</router-link>
</div>
</template>
However, when I added a li element named "Router" to the main navbar things didn't go as smoothly. On hover, the pointer doesn't appear as expected and when clicked, it fails to trigger the correct template.
<li>
<router-link to="/about" class="nav__menu-item"> RouterAbout</router-link>
<li>
My question now is: How can I make the RouterAbout element effectively trigger the about template upon clicking?