Question

我目前正在使用vue-router将我们发送到这样的关于页面：

# @/views/About
<template>
  <p>About Vue...</p>
</template>
<script>
[...]
</script>
<style>

</style>

路线的呈现方式如下：

# @/App.vue
<template>
  <Header />
  <router-view>
</template>
<script>
  import ...
</script>
<style>
  header {
    background: black;
  }
</style>

问题：

仅当我在About.vue上时，如何才能更改标题背景颜色（如果我转至/或/contact标题等其他路径应该保持不变）？

预先感谢您的帮助

Answer 1

使用观察者或计算属性来观察您的this.$route，然后根据您当前是否在/about路线来有条件地应用类或样式。例如..

# @/App.vue
<template>
  <Header :class="[altBackground ? 'header-red' : 'header-black']" />
  <router-view>
</template>
<script>
  import ...
  computed: {
      altBackground() {
          const path = this.$route.path.split('/')
          return path[path.length-1].toLowerCase() === 'about'
      }
  }
</script>
<style>
  .header-black {
    color: black;
  }
  .header-red {
    color: red;
  }
</style>

仅在渲染Vue组件时更改样式

问题：

1 个答案: