Изменение компонента навигации в зависимости от того, на какой странице находится пользователь
Я использую прозрачную панель навигации в приложении vue. Цель состоит в том, чтобы иметь различные цветовые ссылки в зависимости от того, на какой странице находится пользователь. Я использую vue-router
и отдельный компонент navbar (навигация).
У меня есть разные цвета фона для разных страниц, например, домашняя страница имеет темно-серый фон, тогда как контактная страница имеет белый фон, а навбар закреплен сверху, поэтому я хочу иметь темные цветные ссылки на навбар, когда фон страницы светлый и наоборот.
Именно так компоненты используются на домашней странице и странице контактов
Home
-navbar
-hero
-content
-footer
Contact
-navbar
-contact form
-footer
Итак, есть ли способ сказать navbar, чтобы иметь другой цвет ссылки, когда на странице контакта против домашней страницы?



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

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>
Любой из этих двух подходов должен помочь вам :)
