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


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

05.01.2020 03:15:37 Просмотров 62 Источник

Я использую прозрачную панель навигации в приложении vue. Цель состоит в том, чтобы иметь различные цветовые ссылки в зависимости от того, на какой странице находится пользователь. Я использую vue-routerи отдельный компонент navbar (навигация).

У меня есть разные цвета фона для разных страниц, например, домашняя страница имеет темно-серый фон, тогда как контактная страница имеет белый фон, а навбар закреплен сверху, поэтому я хочу иметь темные цветные ссылки на навбар, когда фон страницы светлый и наоборот.

Именно так компоненты используются на домашней странице и странице контактов

Home
 -navbar
 -hero
 -content
 -footer

Contact
 -navbar
 -contact form
 -footer

Итак, есть ли способ сказать navbar, чтобы иметь другой цвет ссылки, когда на странице контакта против домашней страницы?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59599753/change-navigation-component-depending-on-what-page-user-is-on#comment105363721_59599753
Не могли бы вы помочь мне понять, что вы подразумеваете под изменением цвета ссылок? Вам просто нужен способ выделить ссылку, соответствующую текущему маршруту, на котором находится пользователь?
https://stackoverflow.com/questions/59599753/change-navigation-component-depending-on-what-page-user-is-on#comment105363755_59599753
@SerShubham у меня разный цвет фона для разных страниц, например, домашняя страница имеет темно-серый фон, а контактная страница имеет белый фон, а навбар фиксируется сверху, поэтому я хочу иметь темные цветные ссылки на навбар, когда фон страницы светлый и наоборот
https://stackoverflow.com/questions/59599753/change-navigation-component-depending-on-what-page-user-is-on#comment105363777_59599753
ААА. Я понимаю. Позвольте мне помочь вам с решением проблемы :)

Ответы - Изменение компонента навигации в зависимости от того, на какой странице находится пользователь / Change navigation component depending on what page user is on

Является ответом!
SerShubham

05.01.2020 03:45:01

Если вы используете 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>

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

https://stackoverflow.com/questions/59599753/change-navigation-component-depending-on-what-page-user-is-on/59599986#comment105364278_59599986
Ага, спасибо шубхам. Мета-тинги очень полезны: D
Помочь в развитии проекта:
Закрыть X