第8章Vue路由

單頁面模式在客戶端實現(xiàn)URL變化，顯示不同內(nèi)容的頁面，將單頁應(yīng)用分割為各自功能合理的組件，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來，路由是連接單頁應(yīng)用中各組件之間的鏈條。8.1vue-router安裝和基本使用8.1.1下載安裝vue-router（1）下載：vue-router.js登錄下載地址https:///zh/installation.html下載。（2）引入在HTML頁面先引入Vue，接著引入Vue-Router<scriptsrc="js/vue.js"></script><scriptsrc="js/vue-router.js"></script>8.1.2vue-router基本用法（1）引入vue和vue-router。（2）創(chuàng)建組件或已有創(chuàng)建好的組件。（3）配置路由，提供一個路由配置表，不同路徑對應(yīng)不同組件的配置。（4）創(chuàng)建路由實例newVueRouter()，傳入路由配置表。（5）把路由實例配置到Vue實例對象上。（6）提供一個路由出口（<router-view></router-view>），用來掛載路由匹配到的組件，組件將渲染在這里。8.2設(shè)置路由被激活的鏈接樣式當(dāng)鏈接被激活時，vue-route會自動為<router-link>渲染時所生成的元素賦予一個類(class)，在默認(rèn)情況下，這個類是router-link-active。8.3設(shè)置路由切換過渡動畫使用過渡組件<transition>，包裹路由出口<router-view></router-view>8.4嵌套路由一個被渲染的組件同樣可以包含自己嵌套的

<router-view>，需要在配置路由表時，配置children選項，children選項可以給某個路由設(shè)置嵌套路由。8.5命名路由在配置路由表時，name配置選項可以給某個路由設(shè)置名稱。8.6別名在配置路由表時，alias配置選項可以給某個路由設(shè)置別名。8.7重定向“重定向”的意思是，當(dāng)用戶訪問/a時，URL將會被替換成/b，然后去匹配路由/b。在配置路由表時，redirect配置選項設(shè)置重定向。8.8命名視圖如創(chuàng)建一個布局，需要同時（同級）展示多個視圖，而不是嵌套展示，在界面中就需要擁有多個單獨命名的視圖組件<router-view>，分別來渲染對應(yīng)的組件。通過name屬性給視圖組件命名，如果router-view沒有設(shè)置名字，那么默認(rèn)為default。8.9路由傳遞參數(shù)8.9.1路由對象通過路由傳遞的參數(shù)是存放在當(dāng)前路由對象中的。把路由實例配置到Vue實例對象上面，就可以在任何組件內(nèi)通過this.$router訪問路由器對象，也可以通過this.$route訪問當(dāng)前路由對象，當(dāng)前路由對象存放著當(dāng)前激活的路由狀態(tài)信息。8.9.2路由傳遞參數(shù)先在路由配置中配置形參，配置在路徑后使用冒號“:”標(biāo)記。當(dāng)匹配到一個路由時，參數(shù)值會被設(shè)置到this.$route.params。8.9.3查詢字符串傳遞參數(shù)如果在路由中，使用查詢字符串，給路由傳遞參數(shù)，當(dāng)匹配到一個路由時，查詢參數(shù)的鍵值對會被設(shè)置到this.$route.query。8.10編程式的導(dǎo)航

router實例方法的導(dǎo)航方法有push、replace、go。在Vue實例內(nèi)部，可以通過$router訪問路由實例，因此可以調(diào)用this.$router調(diào)用這些方法。學(xué)習(xí)vue-router的基本使用，了解路由中3個基本的概念：route、routes、router。route：表示它是一條路由，單數(shù)形式routes：表示它是一組路由，把route的每一條路由組合起來，形成一個數(shù)組router：表示它是一個機制，充當(dāng)管理路由的管理者角色學(xué)習(xí)vue-router的基本使用前，首先了解路由中3個基本的概念：route、routes、router。