Vue Router의 페이지 로드 시 "Scroll to Anchor" 시뮬레이션 방법

Vue Router의 페이지 로드 시 "Scroll to Anchor" 시뮬레이션 방법

다음 라우터 구성을 가진 소형 Vue.js SPA가 있습니다.이 SPA는 문서에서 가져옵니다.

export default new VueRouter({
    routes, // defined above...

    mode: 'history',

    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return { selector: to.hash }
        } else if (savedPosition) {
            return savedPosition;
        } else {
            return { x: 0, y: 0 }
        }
    }
})

홈페이지 링크 검토:

<router-link to="#services">Services</router-link>

앵커 요소로 점프합니다.<div id="services">...</div>역시나다만, 링크를 액티브하게 하면, 에서 스크롤 합니다.#services페이지를 갱신하면, 로 돌아갈 수 없습니다.#services. URL에 해시가 포함되어 있어도 종료한 장소와 같은 위치를 유지합니다(예:app.dev/#services).

URL에 해시가 포함되어 있는 경우(및 해시가 유효한 기존 요소에 대응하고 있는 경우) 페이지 로드 시에 사용자를 앵커 요소로 이동하도록 라우터를 설정하려면 어떻게 해야 합니까?

저도 같은 문제가 있었지만 해시까지 애니메이션 스크롤을 하고 싶었습니다.두 가지 기능을 모두 체크할 수 있었습니다.vue-scrollto. https://github.com/rigor789/vue-scrollto

이런 게 효과가 있을 거야

// import
import VueScrollTo from 'vue-scrollto';

//...

scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
        VueScrollTo.scrollTo(to.hash, 700);
        return { selector: to.hash }
    } else if (savedPosition) {
        return savedPosition;
    } else {
        return { x: 0, y: 0 }
    }
}

이렇게 하면 항상 해시에 애니메이션을 만들 수 있습니다.애니메이션을 하지 않으려면0대신 때맞춰서700만약 당신이 그 모듈을 사용하는 것을 좋아하지 않는다면, 당신은 여기에 기술된 기술을 사용하여 일반적인 Javascript를 통해 수동으로 앵커로 점프할 수 있습니다.

언급URL : https://stackoverflow.com/questions/44954856/how-to-simulate-the-scroll-to-anchor-on-page-load-in-vue-router