Изменение компонента навигации в зависимости от того, на какой странице находится пользователь

Если вы используете vue-router, текущий маршрут, на котором находится пользователь, доступен из переменной: this.$route.path. Например, если ваш пользователь находится на домашнем маршруте, значение переменной может быть: /home.

Это можно использовать для динамического изменения цвета навигационной панели:

//in your navbar.vue (navbar component)

<template>
   <div v-bind:class="{color: navBarColor}">
   </div>
</template>


<script>
export default {
   computed: {
      navBarColor() {
         if (this.$route.path === "/home") { // if it is a dark route
            return "#fff"; // basically any light color you want
         }
         return "#000"; // the dark color of your choice.
      }
   }
}
</script>

Сейчас это должно сработать. В дальнейшем я бы рекомендовал использовать meta-ключ, разрешенный в маршрутизаторе vue. Вы можете установить пользовательские мета-поля для каждого маршрута, используя это.

Проверьте: https://router.vuejs.org/guide/advanced/meta.html

Тогда ваш компонент будет выглядеть примерно так:

//router.vue

const router = new VueRouter({
  routes: [
    {
      path: '/home', //the one with the dark background
      component: Home,
      meta: { navBarColor: '#fff' }
    }
  ]
});

// navbar.vue


<template>
   <div v-bind:class="{color: navBarColor}">
   </div>
</template>


<script>
export default {
   computed: {
      navBarColor() {
        return this.$route.meta.navBarColor
      }
   }
}
</script>

Любой из этих двух подходов должен помочь вам :)