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类不会添加到导航栏中。按预期工作。

现在用户转到/somepage，映射到SomePage.vue，它在router-view内呈现。我希望SomePage.vue更改App.vue上的colorNav属性，以便将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

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

beforeRouteEnter（无法访问vue实例的this）
beforeRouteUpdate（可用v2.2起）
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()，您的路由器将无法进行路由切换。

Answer 3

这些答案对我有帮助，但我最终使用了不同的解决方案。您的模板也可以访问<template> <div> <div class="navbar" v-bind:class="{ 'color-nav': $route.path == '/somepage' }"></div> <router-view></router-view> </div> </template>，因此您可以执行以下操作：

$route.path

如果/somepage为S2RegionCoverer cov = new S2RegionCoverer(); cov.setMaxLevel(14); cov.setMinLevel(14); S2CellUnion cells = cov.getCovering(region_rect);，则会添加'color-nav'类。我认为这相同，但无需添加数据属性或观察者。一旦你有多个可能的课程，它可能会变得混乱。

根据路径动态地将CSS类插入到导航栏

3 个答案: