Dynamically inserting a CSS class to navbar based on route

Question

Vue 2 and Vue-Router 2.

I\'m trying to change the color of my app\'s navbar based on which route is visited. Here\'s what I have:

main.js:

im         


        

Answer 1

There are multiple ways you can do it. I myself have different kind of headers depending of the page I am on.

One simple way can be to have some check on which route you are and depending on route change this variable. You can put a watch on $route, and whenever it changes, you can decide the value of colorNav depending on current route. Code will be something like:

Another way to do it can be have this variable in some centralised state or vuex store and change this from each component's mounted block depending on requirement.