根据路线将CSS类动态插入导航栏

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>

使用此设置，由于colorNavproperty为false，因此color-nav不会将类添加到导航栏。按预期工作。

现在，用户转到/somepage，它映射到SomePage.vue，后者在内部渲染router-view。我希望SomePage.vue更改colorNavApp.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>

另一种方法是让这个变量处于某个集中状态或vuex存储中，并根据需要从每个组件的安装块中更改它。

Answer 2

您可以使用组件内防护，例如：

1. beforeRouteEnter（无权访问thisvue 实例）
2. beforeRouteUpdate（可用 v2.2 以上）
3. 离开前

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。我想这相当于同一件事，但不必添加数据属性或观察程序。一旦有多个可能的类，它可能会变得混乱。