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:

import App from "../components/App.vue"    

const app = new Vue({
  router: Router,
  template: '<app></app>',
  components: { App }
}).$mount('#app')

App.vue:

<template>
    <div>
        <div class="navbar" v-on:class="{ colorNav: 'color-nav' }"></div>
        <router-view></router-view>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        colorNav: false
      }
    }
  }
</script>

With this setting, since colorNav property is false, the color-nav class is not added to the navbar. Working as intended.

Now the user goes to /somepage, which maps to SomePage.vue, which renders inside router-view. I would like SomePage.vue to change the colorNav property on App.vue so that color-nav class is added to the navbar.

How do I do that?

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:

<script>
  export default {
    data() {
      return {
        colorNav: false
      }
    }
  watch: {
    '$route' () {
      if (this.$route.path === '/somepage') {
        this. colorNav = true
      }
      else {
        this. colorNav = false
      }  
    }
  }
}
</script>

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.

Answer 2

These answers helped me, but I ended up using a different solution. Your template also has access to $route so you can do something like this:

<template>
    <div>
        <div class="navbar" v-bind:class="{ 'color-nav': $route.path == '/somepage' }"></div>
        <router-view></router-view>
    </div>
</template>

The 'color-nav' class will be added if the $route.path is /somepage. I suppose this amounts to the same thing, but without having to add data properties or watchers. Once you have multiple possible classes, it could get messy though.

Answer 3

You can use in-component guards like:

1. beforeRouteEnter (Does not have access to this of the vue instance)
2. beforeRouteUpdate (Available v2.2 onwards)
3. beforeRouteLeave

---

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {

  },
  beforeRouteUpdate (to, from, next) {

  },
  beforeRouteLeave (to, from, next) {

  }
}

In each of the methods you have access to to and from variables which are the route objects containing the path.

So for your case you can use beforeRouteLeave, to know the to.path and accordingly modify your data property like so:

export default {
  data() {
    return {
      colorNav: false
    }
  },
  beforeRouteLeave (to, from, next) {
    if(to.path === '<your-route-name>') {
       this.colorNav = 'your-choice'
    }
    next() // Don't forget this
  }
}

If you forget call to next() your router won't proceed onto the route switching.