Name: Style Navigation Based on Route in Nuxt
Uploaded: 2017-08-21T23:10:50-05:00
Description: Your navigation should visually identify which page the user is currently visiting. This lesson walks through adding styles to the navigation element which matches the current page the user is viewing.

Start a Nuxt Project with npx and the Vue.js CLI

Add a CSS Library from npm to Nuxt

Add JavaScript Libraries from npm to Nuxt

Create a Vuex Store for Global Data in Nuxt

Load Data into the Vuex Store in Nuxt

Access the Router Params to Load Page-Specific Data in Vue.js and Nuxt

Build Global Navigation with Layouts and nuxt-link in Nuxt

Create CSS Transition Effects in Vue.js and Nuxt

Style a List and List Items in Vue.js and Nuxt

Register Vue.js Filters as Plugins in Nuxt

Style Navigation Based on Route in Nuxt

Display Only Available Data in Vue.js and Nuxt

Display a User Data Page Based on id in Vue.js and Nuxt

Build a Recursive Component for Nested Comments in Vue.js and Nuxt

Create a News App with Vue.js and Nuxt

Your navigation should visually identify which page the user is currently visiting. This lesson walks through adding styles to the navigation element which matches the current page the user is viewing.




I'm going to ditch this header and make it so the navigation shows me where I am instead of relying on this. I'll do that real quick by jumping between each of these pages and deleting it.

[pause]

Now with all of them gone, we can focus on the navigation. The navigation is in the default view. First with each of these next links, I'm going to add a couple classes from Takions, one being the link which essentially gets rid of the underline and then other being underline hover which gives me an underline when I hover on it. It looks like this.

To know which one of these is currently active, let's add an underline. We do that by specifying a class. I'll call this nux link active and then just say text decoration underline. Right now we're on the show page.

You can see show is underlined and home is underlined. That's because the current URL matches show and just the simple forward slash. To fix that, there's a convenient class called exact active. You can see because we're using exact active instead of just active that home no longer shows up. When I click on these and they lose focus, they stay underlined now.

I'm also just going to say font weight bold to make it stand out a tiny bit more. The last tip here is in your config if you want to change the name of that class, the default is just nux link exact active. You can always just say router link active class something else. But I'm just going to use the default because nux link exact active works fine just for me.

Style Navigation Based on Route in Nuxt

Share this video with your friends

Course

Create a News App with Vue.js and Nuxt