Change Color Depending On Route In Vue

I need to change css color depending on the route or a prop for a route For example: if I go to home page the header needs to be red, If I go to the about page the header needs to

Solution 1:

I'm not sure that css is a supported key in vue-router.

Hence, you should probably better do it directly on the concerned navbar component like this

<template>
  <div id="app">
    <div id="nav">
      <div :style="{ color: navbarColors[$route.path] }">Custom text in the navbar</div>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      navbarColors: {
        '/': 'red',
        '/about': 'blue',
      },
    }
  },
}
</script>

Here, the div will toggle between red and blue depending if you're on the root or about page.
Here is a github repo example: https://github.com/kissu/so-vue-route-color (pretty much the default vue2 setup but in case it is needed)