今天要介紹的是路由元信息，滾動行為以及路由懶加載這幾個的使用方法。

1.路由元信息

什么是路由元信息，看看官網的解釋，定義路由的時候可以配置 meta 字段可以匹配meta字段，那么我們該如何使用它，一個簡單的例子，改變?yōu)g覽器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這個不用我說了吧這個是在組件跳轉之后調用比較適用于返回頁面之前瀏覽過的區(qū)域或者是讓頁面返回頂部的操作。

2.滾動行為

想必各位同學應該知道我要講些什么了沒錯就是頁面的前進和后退時的滾動事件，怎么實現(xiàn)呢，有兩種實現(xiàn)方式，先看代碼。

//剛才我說過的方法直接使用afterEach方法去實現(xiàn)組件的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.pushState 的瀏覽器中可用。更多的使用方法可以去官網去看看。