css - 在 vue.js 中，我只能在当前路由器下更改父元素的 css 吗？

Question

我想在组件中更改父级的样式。而且我不想更改其他组件的 CSS。看看我的代码。

App.vue

<div class="page-content">
    <router-view ref="routeview"></router-view>
</div>

router/index.js

  routes: [
    {   path: '/home',            name: 'Home',       component: HomeView     },
    {   path: '/heroes',      name: 'Heroes',     component: HeroesView   },
  ]

主视图

<style>
.page-content {
    background-color: red;
}
</style>
<style scoped>
</style>

如果我像上面那样把 .page-content CSS 放在全局 CSS 区域，它也会改变 HerosView 的样式。那不是我想要的。我想更改当前 HomeView 页面下的 .page-content 背景。

这可能吗？

Answer 1

从 router.beforeEach 钩子(Hook)中添加 styled 类

router.beforeEach((to, from, next) => {
    if(...) {
        document.getElementsByClassName('page-content')[0].classList.toggle('styled');
    }
})

<style>
.page-content.styled {
    background-color: red;
}
</style>