記事ディレクトリ
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ルーティングする方法。3番目の引数savedPositionは、popstateナビゲーション（ブラウザーの進む/戻るボタンがトリガーされる）が使用可能な場合に限ります。
このメソッドは、次のようなスクロール位置のオブジェクト情報を返します。
{ x: number, y: number }{ selector: string, offset? : { x: number, y: number }}（オフセットは2.6.0以降でのみサポートされます）
falsyの値（翻訳者注：falsyはそうfalseではありません。ここを参照）または空のオブジェクトを返す場合、スクロールは発生しません。
「スクロールしてアンカー」の動作をシミュレートする場合：
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
ルーティングメタ情報（次の記事の内容）を使用して、スクロールをより細かく制御することもできます。
4.例
4.1 example01
\ 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;
現在、多くのコンテンツとスクロールバーを含む3ページがあります。
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a2.27ブランチ：branch07コミットの説明：a2.27（example01-1-ローリングケースの基本的なフレーム実装）
タグ：a2.27
4.2 example02
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 example03
この種の効果は絶対に必要ありません=>ナビゲーションにジャンプするたびに、スクロールバーがそこにあることを願っています最顶层。
これは、実際には、このセクションで説明しているスクロール動作です。
ルーティング構成には、スクロール動作を処理するための特別な機能があります。
returnオブジェクトを残すだけです。2つの値=>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 example04
ロールバック=>最後のブラウジング状態に戻ります（ただし、ユーザーのニーズと経験によっては、すべてのロールバックが必要なわけではありません）
したがって、この動作には特別な処理を行う必要があります。
scrollBehavior=> 3つのパラメータを受け取る=> to、from, savedPosition
最初の2つは比較的単純で、そこから来ました
3番目のパラメータは特別です、それを印刷してください
scrollBehavior(to, from, savedPosition) {
console.log(savedPosition);
return {
x: 0,
y: 0
}
},
ナビゲーションジャンプはすべてnull値ですが、クリックして戻る=>
このとき、1つが印刷され对象、最後のスクロールバーの位置情報を表すx合計が含まyれています。リンクをクリックしてジャンプ（アクティブジャンプ）を生成する場合は空、前後にクリックした場合にのみ価値があります。
これにより、リンクをクリックしたのか、前後に移動したのかがわかります。
=>呼び出されたブラウザの履歴を表します。
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a2.30ブランチ：branch07コミットの説明：a2.30（example01-4-scrollBehaviorメソッドのsavedPositionパラメーター）
タグ：a2.30
4.5 example05
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をチェックして詳細なバージョン変更プロセスを確認し、ブログで学ぶことができます。
（後で追加されます）