vue 라우터가 쿼리 매개 변수를 변경할 때 맨 위로 스크롤 방지
루트의 쿼리 파라미터(및 뷰)를 변경할 때 페이지가 맨 위로 스크롤되지 않도록 하려면 어떻게 해야 합니까?props
)?
나는 다음을 시도했지만 운이 없었다.
시도 1 - 루트의 컴포넌트
타임아웃을 임의로 큰 수(1초)로 하면, 어느 정도의 지연 후에 스크롤 다운됩니다.
// in my route's component
props: {...},
watch: {
$route(to, from) {
let y = window.scrollY;
this.$nextTick(() => {
setTimeout(() => {
console.log(`scrolling to ${y}`);
window.scrollTo(0, y);
}, 0);
});
}
}
시행 2 - $router'sscrollBehavior
올바른 로그가 기록됩니다.y
값은 매겨지지만 이전 위치는 유지되지 않습니다.
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
if (from.path !== to.path) {
return { x: 0, y: 0 };
}
let existing = {
x: window.scrollX,
y: window.scrollY
};
console.log(`Existing scroll`, existing);
return new Promise(resolve => {
setTimeout(() => {
resolve(existing);
}, 0);
});
},
나는 이것에 대한 답을 방금 찾았다.제 암호는 이렇습니다.커스텀을 통과하지 않는 한 기본 동작은 맨 위로 스크롤됩니다.params
라우터는 이 설정을 무시합니다.path
에 기재되어 있습니다(https://router.vuejs.org/guide/essentials/navigation.html).
scrollBehavior (to, from, savedPosition) {
// savedPosition is only available for popstate navigations.
if (savedPosition) return savedPosition
// if the returned position is falsy or an empty object,
// will retain current scroll position.
if (to.params.savePosition) return {}
// scroll to anchor by returning the selector
if (to.hash) {
let position = {selector: to.hash}
// specify offset of the element
// if (to.hash === '#anchor2') {
// position.offset = { y: 100 }
// }
return position
}
// scroll to top by default
return {x: 0, y: 0}
}
가짜 또는 빈 개체를 반환하면 Vue 라우터는 원래 위치를 반환합니다.그럼 그냥 관례를 따르겠습니다.params
'save Position'이라는 이름으로 사용하고 있습니다.params
.
this.$router.push({ query: query, params: { savePosition: true } })
이렇게 하면 라우터는 기본적으로는 사용자가 통과하지 않는 한 맨 위로 스크롤됩니다.savePosition
로.params
또는 해시를 통과했을 경우.
기타 답변에 대한 비고:
1. hashbag: true,
.둘 다 아니다.hashbag
도 아니다hashbang
현재 버전의 vue-router 문서에서 찾을 수 있습니다.아마도 이것은 오래된 특성일 것입니다.
2. if (to.params.savePosition) return {}
+this.$router.push({ query: query, params: { savePosition: true } })
추가 매개 변수를 사용할 필요가 없습니다.savePosition
이 문제의 해결책으로
코멘트를 첨부한 답변:
const router = new VueRouter({
mode: 'history', // or 'hash'
routes,
scrollBehavior (to, from, savedPosition) {
// Exists when Browser's back/forward pressed
if (savedPosition) {
return savedPosition
// For anchors
} else if (to.hash) {
return { selector: to.hash }
// By changing queries we are still in the same component, so "from.path" === "to.path" (new query changes just "to.fullPath", but not "to.path").
} else if (from.path === to.path) {
return {}
}
// Scroll to top
return { x: 0, y: 0 }
}
})
같은 문제가 있어, 모드 「history and hashbag: true」를 추가했을 때만 기능했습니다.VueRouter 설정은 다음과 같습니다.
mode: 'history',
hashbag: true,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
},
도움이 됐으면 좋겠다.
내비게이션 가드를 사용해 보다
// in your router.js or whatever your router config is
var clientY = 0
router.beforeEach((next) => {
clientY = window.scrollY
next()
})
router.afterEach(() => {
window.scrollTo(0,clientY)
})
매개 변수가 변경될 때 맨 위로 스크롤하지 않으려면 다음과 같이 하십시오.확인하실 수 있습니다.to
그리고.next
그 길은 같지 않다.
scrollBehavior(to, from, savedPosition) {
if (to.path != from.path) {
return { x: 0, y: 0 };
}
}
언급URL : https://stackoverflow.com/questions/56516013/prevent-scrolling-to-top-when-vue-router-changes-query-params
'IT이야기' 카테고리의 다른 글
런타임에 Java 주석 검색 (0) | 2022.06.22 |
---|---|
코드가 테일콜 최적화를 적극적으로 막으려고 하는 이유는 무엇입니까? (0) | 2022.06.21 |
Vue 캔버스 구성 요소를 JS 개체에서 분리하는 중 (0) | 2022.06.21 |
상태를 사용하여 형식을 바인딩하는 동안 Nuxt JS에서 변환 오류를 가져오는 중 (0) | 2022.06.21 |
GSON이 "BEGIN_OBJECT 예상했는데 BEGIN_ARRAY였나요?"를 던지는 경우 (0) | 2022.06.21 |