Menu
I have my navigation like this
<nav>
<ul class="nav nav-list">
<router-link tag="li" to="/"><a href="#">Home</a></router-link>
<router-link tag="li" to="/page1"><a href="#">Page1</a></router-link>
<router-link tag="li" to="/page2"><a href="#">Page2</a></router-link>
</ul>
</nav>
I want the link to Page1 to be active when ever am in page1 and same for Page2. It is working fine, the links are been activated when I navigate to the pages BUT the problem is that to link to the root (/) page is always active even when I leave the page.
357
To start with routing, we need to add the vue-router. js file. Take the code from https://unpkg.com/vue-router/dist/vue-router.js and save it in the file vue-router.
May 13, 2020. The router-link component creates an <a> tag that's configured to work correctly with Vue router.
Create the header component that contains the navigation links. Then apply the “routerLinkActive” on each router link and provide the CSS class to this property. Here we have created the “active” class in CSS file. Provide the { exact : true } to the root route to avoid multiple active router links.
Sometimes, you might want to attach arbitrary information to routes like transition names, who can access the route, etc. This can be achieved through the meta property which accepts an object of properties and can be accessed on the route location and navigation guards.
The root link is always active, because Vue Router partially matches the root / path with the current path.
To perform an exact match you can either:
Add an exact attribute to the router-link:
<router-link tag="li" to="/" exact>
<a href="#">
Home
</a>
</router-link>
linkExactActiveClass router constructor option instead of linkActiveClass.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With