Vue：（三）路由
阿新 • • 發佈：2018-12-05
（一）基礎介紹
- vue-router用來構建SPA
- <router-link></router-link>或者this.$router.push({path:' '})
- <router-view></router-view>
- 什麼是前端路由？
- 路由是根據不同url地址展示不同的內容或頁面
- 前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做，之前是通過服務端根據url的不同返回不同的頁面實現的
- 什麼時候使用前端路由？
- 在單頁面應用，大部分頁面結構不變，只改變部分內容的使用
- 在單頁面應用，大部分頁面結構不變，只改變部分內容的使用
- 前端路由的優缺點：
- 優點：
- 使用者體驗好，不用每次都從伺服器全部獲取，可以快速展現給使用者
- 缺點：
- 不利於SEO
- 使用瀏覽器的前進/後退鍵時會重新發送請求，沒有合理地利用快取
- 單頁面無法記住之前滾動的位置，無法在前進/後退時記住滾動的位置
- 優點：
（二）分類
- 動態路由匹配
- 巢狀路由
- 程式設計式路由
- 命名路由和命名檢視（很少用）
（三）動態路由
| 模式 | 匹配路徑 | $router.params |
| /user/:username | /user/evan | { username:'evan' } |
| /user/:username/post/:post_id | /user/even/post/123 | { username:'evan',post_id:123 } |
（四）巢狀路由
- 路由巢狀路由
（五）程式設計式路由
- 通過js來實現頁面跳轉
- $router.push("name")
- router.push({path:"name"})
- router.push({path:"name?a=123"})或者router.push({path:"name",query:{a=123}})
- $router.go(1)
- $router.push("name")
（六）命名路由和命名檢視
- 給路由定義不同的名字，根據名字進行匹配
- 給不同的router-view定義名字，通過名字進行對應元件的渲染