什么是
- 路由是單頁面應用（SPA）的路徑管理器。
- vue-router是vue的官方路由插件，和vue.js是深度集成的隘梨，適用于構建單頁面應用宣羊。
- vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑毁腿，并將路徑和組件映射起來辑奈。傳統(tǒng)的頁面中是通過超鏈接進行切換的，vue的單頁面中已烤，則是路徑之間的切換身害，也就是組件的切換，路由模塊的本質就是建立起url和頁面之間的映射關系草戈。
優(yōu)點和缺點
- 優(yōu)點：用戶體驗好塌鸯，不需要每次都從服務器全部獲取，可以快速展示給用戶
- 缺點：
- 不利于seo唐片；
- 使用瀏覽器的前進后退會重新發(fā)送請求丙猬，沒法合理利用緩存；
- 單頁面無法記錄滾動條之前滾動的位置费韭，無法在前進后退的時候記住滾動的位置茧球。
怎么用
- 動態(tài)路由匹配
在定義的時候通過path直接添加匹配url，path: '/cart/:cartId',星持，以:開頭的是參數(shù)抢埋，可以在跳轉頁面中通過$route.params.cartId獲取，在methods里面獲取需要加this督暂。 - 嵌套路由
路由嵌套路由揪垄，也就是子路由，路由中加入children: { path..name..component.. }定義 - 編程式路由
在代碼中通過js實現(xiàn)逻翁，主要通過$router.push('name')實現(xiàn)饥努，也可以$router.push({path:'name'})，或者傳入參數(shù)$router.push({path:'name?id=1'})八回，或者通過對象的形式傳入參數(shù)$router.push({path:'name', query: ?id=1' })酷愧，這樣傳入的參數(shù)在子頁中通過$route.query.id可以獲取，在methods里面獲取需要加this缠诅。 - 命名路由和命名視圖
在router-link中<router-link v-bind:to="{name: 'cart',params:{cartId:1}}">跳轉</router-link>可以通過name值溶浴，傳入參數(shù)跳轉
Tips: 獲取路由參數(shù)時注意參數(shù)名是params還是query
原理
vue-router其實是對history的一個封裝
默認是Hash模式，也就是地址欄中有一個 #
在router中添加 mode: 'history' 時變?yōu)镠istory模式管引，以原生url地址的樣式加載頁面
