Vue 라우터를 사용하여 앵커 태그를 만드는 방법

Question

작은 Vue webapp를 만들려고하는데 이것으로 앵커 태그를 만들고 싶습니다.

<div id="for-home"> 
    .... 
</div> 

을 그리고 여기 내 라우터의 구성입니다 :

export default new Router({ 
    abstract: true, 
    mode: 'history', 
    scrollBehavior:() => ({ y: 0 }), 
    routes: [ 
    { path: '/', component: abcView} 
    ] 
}) 

그러나이 앵커 태그가와

이 나는이 같은 앵커 태그가하고 싶은 div 중 하나에 id을 준 때로는 일하고 때로는 일하지 않습니다.

Answer 1

나는 페이지 내의 특정 영역 (예 : #section-3)으로 이동하여 페이지의 특정 영역으로 직접 이동하는 방법에 대해 묻습니다. 이 작업을 위해

, 당신은 다음과 같이 scrollBehavior 기능을 수정해야합니다

new VueRouter({ 
    mode: 'history', 
    scrollBehavior: function(to, from, savedPosition) { 
     if (to.hash) { 
      return {selector: to.hash} 
     } else { 
      return { x: 0, y: 0 } 
     } 
    }, 
    routes: [ 
     {path: '/', component: abcView}, 
     // your routes 
    ] 
}); 

참조 : http://router.vuejs.org/en/advanced/scroll-behavior.html

가 나는 jsFiddle 예를 만드는 시도했지만 그것 때문에 mode:'history'의 작동하지 않습니다. 당신이 코드를 복사하여 로컬로 실행하면, 당신은 어떻게 작동하는지 볼 수 있습니다 : https://jsfiddle.net/mani04/gucLhzaL/이 scrollBehavior에 {selector: to.hash}을 반환하여

, 당신은 id를 사용하여 표시된 관련 섹션 (로 이동합니다 다음 경로에 앵커 태그 해시를 전달합니다) 그 경로.

Answer 2

나는이 문제에 대해서도 우연히 만났으며 나는 페이지 스왑을 최적화 할 수있는 작은 공간이 있다고 생각했다. 제 경우에는 "점프하는 arround"대신 부드러운 전환을하고 싶습니다. 나는 이미 jQuery에서 $의 별명으로 필요했다.

내 라우터 설정은 부드러운 애니메이션을 위해 필요에 따라 라인을 자유롭게 수정하십시오. 이 코드는 더 깔끔하게 만들 수 있었지만 작업 아이디어를 보여줄 정도로 잘되어 있어야합니다.

// Register Router and Paths 
const router = new VueRouter({ 
    mode: 'history', 
    routes : [ 
     { path: '/aboutme/', component: index, name:'me.index'}, 
     { path: '/aboutme/cv', component: cv, name:'me.cv' } 
    ], 

    // Build smooth transition logic with $ 
    scrollBehavior (to, from, savedPosition) { 
     if (to.hash) { 
      return $('html,body').stop().animate({scrollTop: $(to.hash).offset().top }, 1000); 
     } else { 
      return $('html,body').stop().animate({scrollTop: 0 }, 500); 
     } 
    } 
}) 

내 측면의 측면 질문 : 아무것도 반환해야합니까? 나는 jQuery Animation이 페이지 스크롤을 처리하고 있기 때문에 반환하는 것과 상관없이 아무런 문제가 없습니다.

안부 Gkiokan