3 Vue-router
3.1 路由基礎介紹
什麼是前端路由？
- 路由根據不同的url地址展示不同的內容或頁面
- 前端路由就是把不同路由對應的內容或者頁面的任務交給前端來做，之前是通過服務器端根據url的不同返回不同頁面實現的
什麼時候使用前端路由？
- 在單頁面應用，大部分頁面結構不變，只改變部分內容的使用
前端路由有什麼優點和缺點？
- 優點：用戶體驗好，不需要每次都從服務器全部獲取，快速展現給用戶
- 缺點：
- 不利於SEO
- 使用瀏覽器的前進、後退鍵的時候會重新發送請求，沒有合理地利用緩存
- 單頁面無法記住之前滾動的位置，無法在前進、後退的時候記住滾動的位置
路由重點
- vue-router用來構建SPA
- <router-link></router-link>或者this.$router.push({path:''})
- <router-view></router-view>
路由分類
- 動態路由匹配
- 嵌套路由
- 編程式路由
- 命名路由和命名視圖
3.2 動態路由配置
什麼是動態路由？
goods/:goodsId/user/:userName 必須符合路由規則
Vue-router其實就是對history的一個封裝，history.go(0),history.back=history.go(-1)
url裏面的#其實是默認使用的 hash 路由模式（index.js裏的mode:'hash'），還可以用 history 路由模式。
@：別名的意思
3.3 嵌套路由
什麼是嵌套路由？
路由嵌套路由，例如頁面加載，菜單欄不動，內容變動。
3.4 編程式路由
什麼是編程式路由？
通過js來實現頁面的跳轉
$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
$router.go(1)
3.5 命名路由和命名視圖
什麼是命名路由和命名視圖？
給路由定義不同的名字，根據名字進行匹配
給不同的router-view定義名字，通過名字進行對應組件的渲染