路由組件傳參
我們通常把路由直接映射（綁定）的組件稱爲 路由組件，也只有路由組件才能直接調用路由有關對象：`$router`、`$route`
當我們一個組件即希望作爲路由組件使用，又可能作爲功能組件（某個頁面中的一部分）去使用，這個時候路由組件傳參的方式
來做到這點
案例
我們對 item.vue 組件進行改造，當我們在 home.vue 的商品列表上移入移出，出現商品信息提示層
默認處理
對象模式的
我們也可以有選擇的返回 props
回調函數模式
也可以使用回調函數模式
路由數據獲取
有的時候，進入某個路由以後，我們需要從服務端獲取數據，比如 `/item/:itemId` ，通常，我們有兩種方式來實現
- 導航完成之後獲取：先完成導航，然後在接下來的組件生命週期鉤子中獲取數據，在數據獲取期間顯示加載中之類的 loading 提示
- 導航完成之前獲取：導航完成之前，在路由進入的守衛中獲取數據，在數據獲取成功以後執行導航。
這兩種方式都沒有任何問題（對錯、好壞），自行選擇
導航完成之後獲取
課堂演示
案件演示
導航完成之前獲取（路由生命週期獲取）
課堂演示
案件演示
擴展 - nprogress（路由進度條效果）
http://ricostacruz.com/nprogress/
安裝
npm i nprogress
OR
yarn add nprogress
index.js路由全局裏
路由動效（頁面加載透明度變化-漸進）
利用 `transition` 組件，我們還可以給路由導航加上動效
滾動行爲（新頁面滾動條能回到頁面頂部）
前端路由並沒有重載整個瀏覽器，只是通過 DOM 進行了局部更新。所以，有的時候，瀏覽器的一隻狀態會被保持，比如 滾動條，
當我們在一個頁面中滾動滾動條，然後跳轉到另外一個頁面，滾動條會保持在上一個頁面中，我們其實更希望滾動條能回到頁面頂部，
就像重載了整個頁面一樣
const router = new VueRouter({
routes: [...],
scrollBehavior: () => ({ y: 0 })
});
後退/前進（回到上一頁瀏覽狀態）
正對 後退/前進 行爲，會提供一個 `savedPosition` 參數，通過該參數返回歷史記錄中的滾動值
scrollBehavior (to, from, savedPosition) {
// console.log(savedPosition)
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
路由元信息
定義路由的時候可以配置 `meta` 字段
通過 `meta` 定義要驗證的路由
或者
路由懶加載（按需加載）
當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然後當
路由被訪問的時候才加載對應組件，這樣就更加高效了
2.html
a.js
b.js
