根据路线动态插入 CSS class 到导航栏

Question

Vue 2 和 Vue-Router 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 属性为 false，因此不会将 color-nav class 添加到导航栏。按预期工作。

现在用户转到 /somepage，它映射到 SomePage.vue，它在 router-view 内呈现。我想 SomePage.vue 更改 App.vue 上的 colorNav 属性，以便将 color-nav class 添加到导航栏。

我该怎么做？

Answer 1

您可以通过多种方式实现。我自己有不同类型的 headers，具体取决于我所在的页面。

一种简单的方法是检查您所在的路线，并根据路线更改此变量。你可以在$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 or vuex 存储中，并根据需要从每个组件的安装块中更改它。

Answer 2

您可以使用 in-component 守卫，例如：

beforeRouteEnter（没有访问vue实例的this）
beforeRouteUpdate（从 v2.2 开始可用）
离开路线前

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()，您的路由器将不会继续进行路由切换。

Answer 3

这些答案对我有帮助，但我最终使用了不同的解决方案。您的模板还可以访问 $route，因此您可以执行以下操作：

<template>
    <div>
        <div class="navbar" v-bind:class="{ 'color-nav': $route.path == '/somepage' }"></div>
        <router-view></router-view>
    </div>
</template>

如果 $route.path 是 /somepage，将添加 'color-nav' class。我想这相当于同一件事，但不必添加数据属性或观察者。一旦你有多个可能的 classes，它可能会变得混乱。

根据路线动态插入 CSS class 到导航栏

Dynamically inserting a CSS class to navbar based on route

vue.js

vue-router

vuejs2