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><divid="app"><divid="nav"><div:style="{ color: navbarColors[$route.path] }">Custom text in the navbar</div><router-linkto="/">Home</router-link> |
      <router-linkto="/about">About</router-link></div><router-view /></div></template><script>exportdefault {
  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)