10 분 동안 vue 스크롤 행 위 를 자세히 이해 합 니 다.
경로 의 스크롤 행위 가 무엇 입 니까?
새 경로 로 전환 할 때 페이지 를 맨 위로 굴 리 거나 원래 의 스크롤 위 치 를 유지 하려 면 페이지 를 다시 불 러 오 는 것 과 같 습 니 다.
메모:이 기능 은 HTML 5 history 모드 에서 만 사용 할 수 있 습 니 다.이 모드 에서 우 리 는 서 비 스 를 시작 해 야 한다.
저 희 는 스크롤 Behavior 방법 으로 스크롤 을 합 니 다.
scrollBehavior 방법 수신 to 와 from 경로 대상.세 번 째 인자 savedPosition 은 popstate 내 비게 이 션(브 라 우 저 를 통 해 전진/후퇴 단 추 를 누 를 때 만 사용 할 수 있 습 니 다)
다음은 저희 가 작은 사례 를 하나 만들어 서 알 아 보도 록 하 겠 습 니 다.
효과.
<div id="app">
<h1> </h1>
<ul>
<li><router-link to="/"> </router-link></li>
<li><router-link to="/foo"> </router-link></li>
<li><router-link to="/bar"> </router-link></li>
<li><router-link to="/bar#an1"> </router-link></li>
<li><router-link to="/bar#an2"> </router-link></li>
</ul>
<router-view></router-view>
</div>
<script>
var Home = {
template:"<div>home</div>"
}
var Foo = {
template:"<div>foo</div>"
}
var Bar = {
template:
`
<div>
bar
<div style="height:500px;background: yellow;"></div>
<p id="an1" style="height:500px;background: red;"> </p>
<p id="an2" style="height:300px;background: blue;"> </p>
</div>
`
}
var router = new VueRouter({
mode:"history",
//
scrollBehavior (to, from, savedPosition) {
// ，
if (savedPosition) {
return savedPosition
} else {
if (to.hash) {
return {selector: to.hash}
}
}
},
routes:[
{
path:"/",component:Home
},
{
path:"/foo",component:Foo
},
{
path:"/bar",component:Bar
}
]
});
var vm = new Vue({
el:"#app",
router
});
</script>
https://besmall.github.io/vue-gundong/
https://github.com/Besmall/vue-gundong
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
