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   },
  ]

HomeView

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

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

有可能吗？

Answer 1

从styled钩子添加router.beforeEach类

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

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

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

1 个答案: