什么是
- 路由是單頁面應用（SPA）的路徑管理器。
- vue-router是vue的官方路由插件，和vue.js是深度集成的，適用于構(gòu)建單頁面應用。
- vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面中是通過超鏈接進行切換的，vue的單頁面中，則是路徑之間的切換，也就是組件的切換，路由模塊的本質(zhì)就是建立起url和頁面之間的映射關(guān)系。
優(yōu)點和缺點
- 優(yōu)點：用戶體驗好，不需要每次都從服務器全部獲取，可以快速展示給用戶
- 缺點：
- 不利于seo；
- 使用瀏覽器的前進后退會重新發(fā)送請求，沒法合理利用緩存；
- 單頁面無法記錄滾動條之前滾動的位置，無法在前進后退的時候記住滾動的位置。
怎么用
- 動態(tài)路由匹配
在定義的時候通過path直接添加匹配url，path: '/cart/:cartId',，以:開頭的是參數(shù)，可以在跳轉(zhuǎn)頁面中通過$route.params.cartId獲取，在methods里面獲取需要加this。 - 嵌套路由
路由嵌套路由，也就是子路由，路由中加入children: { path..name..component.. }定義 - 編程式路由
在代碼中通過js實現(xiàn)，主要通過$router.push('name')實現(xiàn)，也可以$router.push({path:'name'})，或者傳入?yún)?shù)$router.push({path:'name?id=1'})，或者通過對象的形式傳入?yún)?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}}">跳轉(zhuǎn)</router-link>可以通過name值，傳入?yún)?shù)跳轉(zhuǎn)
Tips: 獲取路由參數(shù)時注意參數(shù)名是params還是query
原理
vue-router其實是對history的一個封裝
默認是Hash模式，也就是地址欄中有一個 #
在router中添加 mode: 'history' 時變?yōu)镠istory模式，以原生url地址的樣式加載頁面
