[vue] 특정 페이지에서만 특정 클래스 추가하기

vue 프로제트를 작업하다보니 content 영역에 대해서 메인 Home 페이지에서만 main 클래스를 추가해야 하는 상황이 발생했다.

 

 

---

방법) [ :class ] 속성을 활용하여 특정 페이지에서 특정 클래스 추가

<template>
  <HeaderComponent />
  <div id="content" class="cont" :class="{ main: $route.name === 'MainHome' }">
    <router-view></router-view>
  </div>
  <FooterComponent />
</template>

<script>
import HeaderComponent from './components/layout/HeaderComponent.vue'; // 변경된 이름으로 import
import FooterComponent from './components/layout/FooterComponent.vue'; // 변경된 이름으로 import

export default {
  name: 'App',
  components: {
    HeaderComponent,
    FooterComponent
  }
};
</script>

<style>

</style>

.

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'; // Vue 3에 맞게 변경
import Home from '../views/MainHome'; // 변경된 Home 컴포넌트
import newlyProduct from '../views/newlyProduct';

const routes = [
  {
    path: '/',
    name: 'MainHome',
    component: Home
  },
  {
    path: '/newlyProduct',
    name: 'newlyProduct',
    component: newlyProduct
  }
];

const router = createRouter({
  history: createWebHistory(), // Vue 3에 맞는 history 모드 설정
  routes
});

export default router;

---

 

이렇게 MainHome 페이지에서 'main' 클래스가 추가로 붙은걸 확인할 수 있다.