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?

nabrown · Accepted Answer · 2018-04-11 19:52:35Z

18

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.

edited Apr 11, 2018 at 19:52

answered Mar 12, 2018 at 0:12

nabrown

84611 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nabrown Over a year ago

Thanks! Fixed now. Also, for anyone else...the shorter syntax is just :class="..."

sNok3 Over a year ago

Thank you a lot! After 2.5 hours searching for a way to get the route name inside a component, your solution fixed my issue!

tony19 · Accepted Answer · 2022-07-15 20:41:44Z

6

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.

edited Jul 15, 2022 at 20:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 20, 2017 at 4:26

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Comments

Amresh Venugopal · Accepted Answer · 2017-02-20 04:48:12Z

6

You can use in-component guards like:

beforeRouteEnter (Does not have access to this of the vue instance)
beforeRouteUpdate (Available v2.2 onwards)
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.

answered Feb 20, 2017 at 4:48

Amresh Venugopal

9,5895 gold badges41 silver badges52 bronze badges

3 Comments

Ege Ersoz Over a year ago

I like @saurabh's answer better, but yours was also very helpful (and I confirmed that it works). Thank you for taking the time to write it out! :)

Amresh Venugopal Over a year ago

@EgeErsoz Sure, no problem. I just added in case it helps you or someone else searching this question :)

samuel toh Over a year ago

@Amresh Venugopal, Seems you master vue.js. I need you help. Look at this : stackoverflow.com/questions/42454027/…

Collectives™ on Stack Overflow

Dynamically inserting a CSS class to navbar based on route

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related