vue router-link-active 적용하기

vue 라우터를 선택하면 특정 css를 변경하고 싶은데 어떡해야 하나!

해당 라우터를 누르면 뒤에 버튼의 색깔이 바뀌게 하고 싶었다.

:hover, :active만으로는 안되서 router-link-active를 알아보았다.

vue3기준입니다.

1. vue-router에서 변경하기

const router = createRouter({
  history: createWebHistory(),
  routes,
  linkActiveClass: "route-active",
  linkExactActiveClass: "route-active"
});

• linkActiveClass: "route-active",
  linkExactActiveClass: "route-active" 를 추가해준다.
• "route-active" 본인이 원하는 것으로 기입할 수 있다.

2. 라우터 링크가 있는 페이지에서 수정한다.

• 나는 라우터 링크를 누르면 id="my-button"의 속성이 변경하게 하려한다!

#mypage-button:hover,
.route-active #mypage-button {
  background-color: #653fd3;
  border-radius: 10%;
  color: white;
  padding: 10px;
  border: #653fd3;
  /* cursor: pointer; */
}

• 이렇게 하면 hover할 때, router-link를 눌렀을 때 색깔이 변경된다.