vuejs 경로 발 후, A 성분 scrollTop 0, 성분 B 행 I 경로 인 동안, 동일한

Question

<template> 
 
    <div class="index"> 
 
     <common-header id="common-header" class="common-header" v-el:commonheader></common-header> 
 
     <router-view transition keep-alive class="index-view"></router-view> 
 
    </div> 
 
</template>

경로보기 개의 성분 A 및 B를 표시한다 스크롤 아래로 스크롤 구성 요소 A, A도 스크롤됩니다. 누구든지 아이디어가 있습니까?

Answer 1

경로 전이가 시작되고 페이지의 맨 위로 스크롤되기 전에 라우터에 전역 후크를 추가 할 수 있습니다. 그것이 내가 어떻게 해결했는지입니다. Vue2를 들어 here

뷰 1

router.beforeEach(function (transition) { 
window.scrollTo(0, 0) 
transition.next() 
}) 

읽기 :

const router = new VueRouter({ 
    scrollBehavior (to, from, savedPosition) { 
    return { x: 0, y: 0 } 
    } 
}) 

이 Vuejs2.0를 들어 here

Answer 2

를 참조하십시오, 스크롤 행동을 다루는 새 허용 방법이 페이지 변경 :

import VueRouter from 'vue-router'; 
const router = new VueRouter({ 
    scrollBehavior (to, from, savedPosition) { 
     return { x: 0, y: 0 } 
    } 
}) 

각 탐색이 변경되면 페이지 상단으로 스크롤됩니다. 당신은 read up on the full, official documentation about this functionality here 일 수 있습니다.

Answer 3

잘못된 요소를 스크롤하는 것 같습니다. 같은 실수를했습니다. 구성 요소 A와 구성 요소 B가 둘 다 요소 본문에 있고 본문 스크롤을하므로 스크롤 막대를 이동하는 동안, 그것은 모두 A & BI를 위해 작동 할 것입니다. BI는 마침내 몸을 스크롤하는 대신 구성 요소를 스크롤하여 해결할 것입니다.