Динамически вставив класс CSS для NavBar на основе маршрута

Question

Vue 2 и Вью-маршрутизатор 2.

Я пытаюсь изменить цвет навигационной панели моего приложения на основе которого посетил маршрут. Вот что у меня есть:

main.js:

import App from "../components/App.vue"  

const app = new Vue({ 
    router: Router, 
    template: '<app></app>', 
    components: { App } 
}).$mount('#app') 

App.vue:

<template> 
    <div> 
     <div class="navbar" v-on:class="{ colorNav: 'color-nav' }"></div> 
     <router-view></router-view> 
    </div> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     colorNav: false 
     } 
    } 
    } 
</script> 

С помощью этого параметра, так как colorNav свойства ложно, color-nav класса не добавляются в навигационную панель , Работа по назначению.

Теперь пользователь переходит на /somepage, который отображается на странице SomePage.vue, которая отображается внутри router-view. Я хотел бы, чтобы SomePage.vue изменил свойство colorNav на App.vue, так что класс color-nav добавлен в навигационную панель.

Как это сделать?

Answer 1

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

Одним из простых способов может быть некоторая проверка того, какой маршрут вы и в зависимости от маршрута, измените эту переменную. Вы можете поставить часы на $route, и всякий раз, когда он изменяется, вы можете выбрать значение colorNav в зависимости от текущего маршрута. Код будет что-то вроде:

<script> 
    export default { 
    data() { 
     return { 
     colorNav: false 
     } 
    } 
    watch: { 
    '$route'() { 
     if (this.$route.path === '/somepage') { 
     this. colorNav = true 
     } 
     else { 
     this. colorNav = false 
     } 
    } 
    } 
} 
</script> 

Другой способ сделать это может быть у этой переменной в некоторой centralised state или vuex магазин и изменить его в установленный блок каждого компонента в зависимости от требований.

Answer 2

Вы можете использовать в двухкомпонентных охранниками, как:

1. beforeRouteEnter (не имеет доступа к this экземпляра вю)
2. beforeRouteUpdate (Доступно v2.2 и выше)
3. beforeRouteLeave

---

const Foo = { 
    template: `...`, 
    beforeRouteEnter (to, from, next) { 

    }, 
    beforeRouteUpdate (to, from, next) { 

    }, 
    beforeRouteLeave (to, from, next) { 

    } 
} 

В каждом из методов у вас есть доступ к to и from переменным, которые являются объектами маршрута, содержащими путь.

Так что для вашего случая вы можете использовать beforeRouteLeave, чтобы знать to.path и соответствующим образом изменить вашу собственность данных следующим образом:

export default { 
    data() { 
    return { 
     colorNav: false 
    } 
    }, 
    beforeRouteLeave (to, from, next) { 
    if(to.path === '<your-route-name>') { 
     this.colorNav = 'your-choice' 
    } 
    next() // Don't forget this 
    } 
} 

Если вы забыли позвонить в next() маршрутизатор не будет происходить на переключение маршрута.