Vue.js 根据路由动态插入 CSS 类到导航栏

发布于02月20日

Vue 2和Vue路由2.

我正在try 根据访问的路由更改应用程序导航栏的 colored颜色 .以下是我所拥有的:

主要的js:

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

const app = new Vue({
  router: Router,
  template: '<app></app>',
  components: { App }
}).$mount('#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类不会添加到导航栏.按计划工作.

现在用户转到/somepage，它映射到SomePage.vue，在router-view内部渲染.我想要一页.vue更改应用程序上的colorNav属性.vue，以便将color-nav类添加到导航栏.

我该怎么做？

推荐答案

有多种方法可以做到这一点.我自己有不同类型的标题，这取决于我所在的页面.

一个简单的方法是判断您是哪条路由，并根据路由更改此变量.你可以把手表放在$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个存储器中，并根据需要从每个组件的安装块中更改该变量.