라우터 링크-활성화된 vue-router는 홈페이지 경로의 모든 해시 링크를 활성화함

라우터 링크-활성화된 vue-router는 홈페이지 경로의 모든 해시 링크를 활성화함

나는 접속 경로를 제외하고 홈페이지의 한 섹션으로 스크롤하는 이 네비게이션이 있다.

내 연락처 페이지가 같은 경로에 있지 않기 때문에 나는 접속에서 홈페이지의 어떤 섹션으로 갈 수 있도록 스크롤 동작을 사용해야 했다(다른 방법으로 링크가 작동하지 않음).

그래서 지금 그 일을 하고 나니 또 다른 문제가 생겼다.라우터 링크 액티브 클래스는 홈페이지에 있는 해시 속성으로 모든 루트를 활성화한다.

어떻게 하면 우회할 수 있을까, 나는 이 수업을 없애고 클릭으로 사용자 지정 활성 클래스를 만들려고 했지만 여전히 작동하지 않는다.

<li><router-link to="/">Home</router-link></li>
<li><router-link :to="{name: 'home', hash: '#about'}">About</router-link></li>
<li><router-link :to="{name: 'home', hash: '#courses'}">Courses</router-link></li>
<li><router-link :to="{name: 'home', hash: '#news'}">News</router-link></li>
<li><router-link :to="{name: 'home', hash: '#business-incubator'}">Business incubator</router-link></li>
<li><router-link :to="{name: 'home', hash: '#team'}">Team</router-link></li>
<li><router-link  to="/contact">Contact</router-link></li>

모든 링크가 같은 이름인 '홈'에 있기 때문에 모든 링크가 활성화된다는 것은 이해하지만, 그것이 내가 작업하기 위해 스크롤을 만들 수 있는 유일한 방법이다.그러니, 이것을 하는 더 좋고 적절한 방법이 있다면 도와줘.고마워요.

편집: 스크롤 동작 코드:

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior: function (to) {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (to.hash) {
          resolve({ el: to.hash, top: 140, behavior: 'smooth',  })
        } else {
          resolve({ top: 0, behavior: 'smooth' })
        }
        
      }, 300)
    })
  }
});

참조URL: https://stackoverflow.com/questions/67001987/router-link-active-on-vue-router-activates-all-the-hash-links-on-homepage-route