기사 디렉토리
1. 주요 개선
- 스크롤 동작
- 뒤로 / 앞으로
2. 스크롤 동작
프런트 엔드 라우팅 DOM은 부분 업데이트로 전체 브라우저를 재정의하지 않습니다 . 따라서 스크롤바와 같은 브라우저의 상태가 유지되는 경우가 있는데, 한 페이지에서 스크롤바를 스크롤 한 후 다른 페이지로 이동하면 스크롤바가 이전 페이지에 남아있게됩니다. 전체 페이지를 새로 고침하는 것처럼 스크롤바가 페이지 상단으로 돌아올 수 있기를 바랍니다.
const router = new VueRouter({
routes: [...],
scrollBehavior: () => ({
y: 0 })
});
3. 뒤로 / 앞으로
뒤로 / 앞으로 동작에 있으며 savedPosition매개 변수 를 제공하고 매개 변수를 통해 스크롤하는 기록 값을 반환합니다.
scrollBehavior (to, from, savedPosition) {
// console.log(savedPosition)
if (savedPosition) {
return savedPosition
} else {
return {
x: 0, y: 0 }
}
}
scrollBehavior객체 를 수신 to하고 from라우팅 하는 방법입니다 . 사용 가능한 savedPosition경우 popstate탐색 (브라우저 앞으로 / 뒤로 버튼이 트리거 됨) 인 경우 에만 세 번째 인수 입니다.
이 메서드는 다음과 같은 스크롤 위치의 개체 정보를 반환합니다.
{ x: number, y: number }{ selector: string, offset? : { x: number, y: number }}(오프셋은 2.6.0 이상에서만 지원됨)
falsy 값 (번역자 주 : falsy is not false, 여기 참조 ) 또는 빈 객체를 반환하면 스크롤이 발생하지 않습니다.
"고정으로 스크롤"동작을 시뮬레이션하려는 경우 :
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
또한 라우팅 메타 정보 (다음 기사의 내용) 를 사용하여 스크롤을보다 세밀하게 제어 할 수 있습니다.
4. 예
4.1 예시 01
\ app \ src \ App.vue
<template>
<div id="app">
<h1>我的主页</h1>
<div id="nav">
<router-link exact to="/">Home</router-link>
<span> | </span>
<router-link to="/about">About</router-link>
<span> | </span>
<router-link to="/view">Detail</router-link>
</div>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
.router-link-active {
color: red;
}
</style>
\ app \ src \ views \ Home.vue
<template>
<div>
<ul>
<li v-for="i of 100">{
{i}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style>
</style>
\ app \ src \ views \ Detail.vue
<template>
<div>
<ul>
<li v-for="i of 100">{
{i}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Detail"
}
</script>
<style>
</style>
\ app \ src \ views \ About.vue
<template>
<div>
<ul>
<li v-for="i of 100">{
{i}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "About"
}
</script>
<style>
</style>
\ app \ src \ router \ index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home';
import About from '@/views/About';
import Detail from '@/views/Detail';
Vue.use(VueRouter);
let router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/view',
name: 'view',
component: Detail
}
]
});
export default router;
이제 많은 콘텐츠와 스크롤 막대가있는 세 페이지가 있습니다.
参考 : https : // https : //github.com/6xiaoDi/blog-vue-Novice/tree/a2.27
지점 : branch07커밋 설명 : a2.27 (example01-1- 롤링 케이스의 기본 프레임 구현)
태그 ： a2.27
4.2 예시 02
Chrome최적화 된 페이지 로 이동 하면 많은 문제가 해결되고 火狐더 심각해 보입니다 .
사실, 브라우저는 페이지 점프 (새로 고침) 중에 무언가를 기록합니다 =>
当前页面的滚动条的位置
페이지를 새로 고칠 때 스크롤 막대는 여전히 원래 위치에 있으며 초기 위치로 이동하지 않습니다.
내비게이션 설정은 고정 된 위치와 스타일로 나중에 클릭 작업에 편리합니다.
\ app \ src \ App.vue
<template>
<div id="app">
<h1>我的主页</h1>
<div id="nav">
<router-link exact to="/">Home</router-link>
<span> | </span>
<router-link to="/about">About</router-link>
<span> | </span>
<router-link to="/view">Detail</router-link>
</div>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
.router-link-active {
color: red;
}
#nav {
padding: 10px 0;
position: fixed;
width: 100%;
left: 0;
top: 0;
background: rgba(0,255,0,.3);
}
</style>
질문 => 아래로 스크롤하여 about페이지를 전환 합니다. 이때 스크롤바는 이전 위치에 남아 있습니다.
参考 : https : // https : //github.com/6xiaoDi/blog-vue-Novice/tree/a2.28
지점 : branch07커밋 설명 : a2.28 (example01-2- 롤링 동작 문제)
태그 ： a2.28
4.3 예시 03
우리는 분명히 이런 종류의 효과가 필요하지 않습니다. => 우리가 내비게이션으로 이동할 때마다, 우리는 확실히 스크롤바가 있기를 바랍니다 最顶层.
이것은 실제로 우리가이 섹션에서 말하는 스크롤 동작입니다.
라우팅 구성에는 스크롤 동작을 처리하는 특수 기능이 있습니다.
return그냥 물건을 남겨주세요. 두 값 => x수평 스크롤 막대 y수직 스크롤 막대
\ app \ src \ router \ index.js
scrollBehavior() {
return {
x: 0,
y: 0
}
}
링크를 클릭하면 새 페이지, 즉 스크롤 막대로 이동하여 맨 위로 스크롤해야합니다.
하지만 여전히 문제가 있습니다 브라우저 回退버튼을 클릭 하고 스크롤바가 맨 위로 이동했습니다. 이것은 확실히 요구 사항에 달려 있지 않습니다
参考 : https : // https : //github.com/6xiaoDi/blog-vue-Novice/tree/a2.29
지점 : branch07커밋 설명 : a2.29 (example01-3- 스크롤 동작 앞 / 뒤 문제)
태그 ： a2.29
4.4 예제 04
롤백 => 마지막 브라우징 상태로 돌아 가기 (그러나 사용자 요구와 경험에 따라 모든 롤백이 필요한 것은 아닙니다)
따라서 우리는이 행동에 대해 특별한 대우를해야합니다.
scrollBehavior=> 세 가지 매개 변수 수신 => to,from, savedPosition
처음 두 가지는 상대적으로 간단합니다.
세 번째 매개 변수는 특별합니다.
scrollBehavior(to, from, savedPosition) {
console.log(savedPosition);
return {
x: 0,
y: 0
}
},
탐색 점프는 모두 null값이지만 뒤로 클릭 =>
이 때, 하나를 인쇄 对象하고,이 x합계 y마지막 스크롤 막대의 위치 정보를 나타내는 그것에는. 당신은 점프 (활성 점프)를 생성 할 수있는 링크를 클릭하면, 그 것이다 空당신이 앞뒤로 클릭하는 경우에만 가치.
이를 통해 링크를 클릭했는지 앞뒤로 이동했는지 알 수 있습니다.
=> 호출 된 브라우저의 기록을 나타냅니다.
参考 : https : // https : //github.com/6xiaoDi/blog-vue-Novice/tree/a2.30
지점 : branch07커밋 설명 : a2.30 (example01-4——scrollBehavior 메서드의 savedPosition 매개 변수)
태그 ： a2.30
4.5 예시 05
scrollBehavior(to, from, savedPosition) {
console.log(savedPosition);
if (savedPosition) {
// 调用的浏览器的历史记录
return savedPosition;
}
return {
x: 0,
y: 0
}
},
이것은 요구 사항을 충족합니다. => 모바일 단말기의 일부 브라우저는 문제가 있으므로이 로직을 추가하는 것이 가장 좋습니다.
参考 : https : // https : //github.com/6xiaoDi/blog-vue-Novice/tree/a2.31
지점 : branch07커밋 설명 : a2.31 (example01-5- 스크롤 동작 최적화)
태그 ： a2.31
물론 원래 위치로 돌아 가려는 경로는 페이지 디자인과 업계의 요구에 따라 다릅니다.
5. 비정상적인 스크롤
2.8.0 새로운
Promise를 반환하여 예상 위치 설명을 얻을 수도 있습니다.
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
x: 0, y: 0 })
}, 500)
})
}
스크롤 동작과 페이지 전환이 잘 작동하도록 페이지 수준에서 전환 구성 요소의 이벤트에 마운트 할 수 있습니다. 그러나 사용 사례의 다양성과 복잡성을 고려할 때 공식은 다양한 사용자 시나리오의 특정 구현을 지원하기 위해이 원래 인터페이스 만 제공합니다.
Xiaodi는 블로그에 코드 변경 위치를 반영하기가 쉽지 않다는 점을 감안하여 github를 사용하여 코드를 호스팅하고 있으며, github에서 자세한 버전 수정 프로세스를 확인하고 블로그에서 배울 수 있습니다.
(나중에 추가 예정)