vue router target scroll

가끔 다음페이지의 어떤 요소에 스크롤 타겟팅이 되어야 하는 경우가 있다.
방법중에 ref와 scrollIntoView(); 속성을 사용하는 방법을 소개한다.

라우트로 넘아가기 전 페이지

<router-link v-bind:to="{ path: '/page2', params: { target: true } }"></router-link>

라우트로 넘어간 페이지

<div id="target" ref="target"></div>
<script>
    export default {
        mounted() {
            this.$nextTick(function () {
                this.$route.params?.target && this.$refs.target?.scrollIntoView();
            });
        },
    }
</script>

돔이 생성되는 싱크 때문에 nextTick으로 한번 감싸준뒤 파라미터 값이 있을때 타겟에 scrollIntoview 속성을 적용한다.

*어떤 기능인지 참고
데모이미지 및 다른기능 참고
https://reactgo.com/scroll-to-anchor-tags-vue-router/