Vue Router 에서 해시태그로 앵커 위치로 이동하기

 

html 코드로 작성할때 a tag id값만 가져와서 url 끝에 #id 붙여주면 화면에서 해당 엘리먼트 위치로 바로 이동되게 하는 것을 vue에서는 어떻게 처리를 할까??

scrollBehavior: (to) => {
    if (to.hash) { // if has a hash...
        console.log(to.hash);
        return {
            selector: to.hash,
            offset: { y: 200 }
        }; // scroll to the element
    }
    return { x: 0, y: 0 };
},

 

Vue Router 객체 안의 scrollBehavior에서 hash가 있는 지 확인후 있다면 그 위치로 이동시킨다. 나같은 경우에 header navigation이 차지하는 영역이 있어서 그대로 위치로 이동하면 원하는 영역이 navigation에 의해 가려지기 때문에 offset y 값을 주어 조금 이동시켰다.

그리고 hashtag를 붙이고 싶다면 router.push 등으로 경로 이동시 hash에 원하는 값을 넣어서 이동시켜주면 된다.

$router.push(
	{ 
      path: "/mypage", 
      query: { section: "profile" }, 
      hash: "#ref_code"}
)