How to change in vue parent component css child

bxeom 0
Viewed 35

Is there a way to set the Vue parent component footer CSS differently only in the subcomponent inside the router?

I want to change the login.vue CSS inside the Router view

I tried both the deep method and the import method, but failed. Any alternatives?

<template>
  <ToHeader />
  <RouterView />
  <ToFooter />
</template>

footer.vue

<template>
  <div class="footer">
    <div class="footer_wrap">
      <h2 class="logo">
        Logo
      </h2>
    </div>
  </div>
</template>
<style>
/* footer */
.footer{
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  background: #3d3936;
  position: absolute;
  bottom: 0;
 }
</style>

Login.vue

<template class="login">
  <div class="login_box">
    
  </div>
</template>
<style>
  .login_box {
    position: absolute;
    top: 50%;
    transform: translate(-50% ,-70%);
    left: 50%;
}
 ::v-deep .footer{
  display: none;
 }
</style>
vue-router vuejs2 vuejs3 vue.js javascript
1 Answers

You can keep the login view separate and create a layout view where you pass the header and footer, for example

Instead of

<template>
  <ToHeader />
  <RouterView />
  <ToFooter />
</template>

you can make

<template>  
  <router-view />  
</template>

Then a common Layout.vue

<template>
  <to-header />
  <!-- ...Other Layout components -->
  <to-footer />
</template>

and Login.vue will be same but you have to handle the route logic in the routes definition using parent and child routes

const routes = [
  { path: '/login',
    component: Login
  },
  {
    path: '/',
    component: Layout,
    children: [
      { path: 'home', component: Home },    
      // ...other sub routes
    ],
  },
]

In this way the login route will always show Login.vue and you can keep a common Layout.vue for all other view pages

Kaneki210
Related