Vue routerの一部の高級用法を深く理解する

今日紹介するのはルートの元の情報で、スクロールの行為とルートが怠惰にこれらの使用方法をロードします。
1.ルーティング元情報
どのルートのメタ情報ですか？公式サイトの説明を見てください。ルートを定義する時、metaフィールドを設定してmetaフィールドにマッチさせることができます。それではどうやって使うべきですか？簡単な例で、ブラウザのtitleの値を変更します。コードを下にします。

//               
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
  mode: 'history',
  routes: [
    {path: 'home', name: 'Home', component: Home,meta:{title:"  "}}
    {path: 'login', name: 'Login', component: Login,meta:{title:"  "}}
  ]
})
//                   window.document.title  
Router.beforeEach((to,from,next) => {
  window.document.title=to.meta.title
})

上のは簡単に見えますか？でも簡単ではないです。比較的小さい例を挙げただけです。どうやって活用すればいいのかは分かりますが、注意が必要です。
第一のポイントは、このbeforeEachページがジャンプする前に呼び出すことです。利点は、例えば、titleの値を変えたいなら、あまり目立たないようにして、直接に置き換えることができます。
第二のポイントafterEachは言うまでもないですよね。これはコンポーネントがジャンプした後、ページに戻る前に見たエリアを呼び出したり、ページを上部に戻すための操作です。
2.転がり行為
皆さんは私が何を言いますか？間違いなくページの前進と後退の時のスクロール事件です。どうやって実現しますか？二つの実現方法があります。まずコードを見ます。

//            afterEach        scrollTo  
Router.afterEach((to,from,next) => {
  window.scrollTo(0,0)
})

次は本当のロールバックイベントです。見てもいいです。

//               
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
  mode: 'history',
  routes: [
    {path: 'home', name: 'Home', component: Home,meta:{title:"  "}}
    {path: 'login', name: 'Login', component: Login,meta:{title:"  "}}
  ]，
  //           
  //{ x: number, y: number }
  //{ selector: string, offset? : { x: number, y: number }}
  //         (offset    2.6.0+   )
  scrollBehavior (to, from, savedPosition) {
  console.log(savedPosition)
  return { x: 0, y: 0 }
  }
})

上ではscrollBehaviorのロールバック方法またはscrollBehaviorのロールバック行為を紹介しましたが、この方法についてはまだよく分からないかもしれません。以下は公式サイトを見て説明します。先端ルートを使って、新しいルートに切り替えたら、ページを上に倒したり、元のロール位置を維持したりしたいです。ページを再読み込みするようにします。vue-routerは、より良いことができますが、それはあなたが自分で指定したルートを切り替える時のページをどのようにスクロールできますか？そうです。この方法はscrollBehaviorスクロールです。なお、この機能はhistory.pusState対応のブラウザでのみ使用できます。もっと多くの利用方法は公式サイトに行ってみてもいいです。
3.ルーティングの不精負荷
もしかしたら、ルーティングを怠けてロードするべきではないかもしれません。必要に応じてロードするべきです。説明しないと後で多く使うと理解します。コードを下にします。

//           ，        
{path:'homepages',name:'Homepages',component:homepages,resolve}

そうです。レスリングを使えば、必要に応じてロードすることができます。簡単ではないですが、レスリングは他にもたくさんの使い方があります。公式サイトに行ってみてください。また、go（）、historyなどの方法を使うか、公式サイトで自分の書いたものを見てみるのが早いです。
締め括りをつける
以上は小编が皆さんに绍介したVue routerの一部の高级な使い方です。皆さんに助けてほしいです。もし何かご质问があれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。