Vue.js 如何在vue cli中更改每个页面的css样式

这是App.vue文件

<template>
  <div id="app">
    <main-header/>
    <router-view/>
    <main-footer/>
  </div>
</template>

<script>
  import MainHeader from './components/layouts/MainHeader'
  import MainFooter from './components/layouts/MainFooter'

  export default {
    name: 'App',
    components: {
      'main-header': MainHeader,
      'main-footer': MainFooter
    }
  }
</script>

从“./components/layouts/MainHeader”导入MainHeader
从“./components/layouts/MainFooter”导入MainFooter
导出默认值{
名称：“应用程序”，
组成部分：{
“主标题”：主标题，
“主页脚”：主页脚
}
}

Header.vue文件是

<ul class="nav nav-pills" id="mainNav">
    <li class="dropdown">
        <a class="active" href="/">
            Home
        </a>
    </li>
    <li>
        <a class="dropdown-item dropdown-toggle" href="/test1">
            test1
        </a>
    </li>
    <li>
        <a class="dropdown-item dropdown-toggle" href="/test2">
            test2
        </a>
    </li>
</ul>

我想为每个页面激活不同的“活动类”。 我不知道该怎么办

如果我单击一个“test2”，那么活动类只需使用带有“test2”的标记进行维护 如何解决这个问题？

可以考虑使用“<代码>活动类< /代码> PROP

<ul class="nav nav-pills" id="mainNav">
  <router-link to="/" tag="li" class="dropdown" active-class="active">Home</router-link>
  <router-link to="/test1" tag="li" class="dropdown-item dropdown-toggle" active-class="active">Test1</router-link>
  <router-link to="/test2" tag="li" class="dropdown-item dropdown-toggle" active-class="active">Test2</router-link>
</ul>

如果使用了“”，则当其目标路由匹配时，

会自动将

.router链接激活。
<ul class="nav nav-pills" id="mainNav">
    <li class="dropdown">
        <a class="active" href="/">
            Home
        </a>
    </li>
    <li>
        <a class="dropdown-item dropdown-toggle" href="/test1" :class="getClass('/test1')">
            test1
        </a>
    </li>
    <li>
        <a class="dropdown-item dropdown-toggle" href="/test2" :class="getClass('/test2')">
            test2
        </a>
    </li>
</ul>
<script>
export default {
  methods: {
    getClass(url) {
      if (window.location.href.includes(url)) {
        return "active"
      }
      return ""
    }
  }
}
</script>