# 簡介
## Vue Router
Vue Router(官網：[https://router.vuejs.org/zh/](https://router.vuejs.org/zh/)) 是Vue.js官方的路由管理器。官方的路由管理器，功能更加強大，現符合企業級項目開發，不推薦自己手動模擬路由。
它和Vue.js的核心 深度集成，可以非常方便的用于SPA應用程序的開發。
## Vue Router包含的功能
* 支持HTML5歷史模式和hash模式
* 支持嵌套路由
* 支持路由參數
* 支持編程式路由
* 支持命名路由
## vue-router是基于路由和組件的
路由用于設定訪問路徑, 將路徑和組件映射起來.
在vue-router的單頁面應用中, 頁面的路徑的改變就是組件的切換.
# vue使用路由
使用方式（語法）
1.引入`vue-router.js`
2.定義路由組件
3.創建路由實例及路由規則
~~~
var router = new VueRouter({
? ?routes:[//routes 是路由規則數組
//每個路由規則都是一個配置對象，其中至少包含 path和component兩個屬性
//path表示當前路由規則匹配的hash地址
//component 表示當前路由規則對應要展示的組件
? ? ? {
? ? ? ? ? ?path:'/home',
? ? ? ? ? ?component:組件名稱
? ? ? }，
? ? ? {
? ? ? ? ? ?path:'/about',
? ? ? ? ? ?component:組件名稱
? ? ? }
……
? ]
})
~~~
4.添加路由鏈接`<router-link to="/home">首頁</router-link>`
router-link是Vue提供的組件，默認會被渲染為a標簽；to屬性默認會被渲染為href屬性；to屬性的值默認會被渲染為#開頭的hash地址。
5.路由填充`<router-view />`
路由填充也稱之為路由占位符，將來通過路由規則匹配到的組件，將會被渲染到router-view所在的位置
6.將路由掛開到實例上
>[success] **單詞：route 路線 具體的某根網線（頁面） router路由器（路由）**
## 書寫案例
:-: 
```
<div id="app">
<router-link to="/comp1">組件1</router-link>
<router-link to="/comp2">組件2</router-link>
<router-view></router-view>
</div>
<script>
var Comp1 = {template: '<div>組件1</div>' }
var Comp2 = {template:'<div>組件2</div>' }
var router = new VueRouter({
routes:[
{
path:'/comp1',
component:Comp1 //如果路由匹配就會渲染當前指定的組件
},{
path:'/comp2',
component:Comp2
}
]
})
var vm = new Vue({
// router:router
router
}).$mount('#app')
</script>
```
# vue-cli結合vue-router
## 定義路由router.js
1. 導入路由對象，并且調用 Vue.use(VueRouter)
2. 創建路由實例，并且傳入路由映射配置
3. 在Vue實例中掛載創建的路由實例
## 路由組件
`<router-link>`和`<router-view>`
`router-link`組件是為了具體跳轉到哪個路由屬性有`to` `tag` 等。to 就相當于具體跳轉到哪個路由。 默認router-link組件呈現在瀏覽器上是 a 標簽；如果通過 `tag="span"` 那么它最終是以定義的`span`元素進行呈現，而且也能跳轉。重點在于`跳轉/導航`
`router-view` 組件是讓最終跳轉的路由 `path` 對應的組件顯示的位置。可以稱之為`占位`路由切換時，切換的是 `router-view` 掛載的組件，其他內容不會發生改變。
# 具體操作
## 安裝路由
`npm install vue-router`
## 創建router實例
## 掛載到Vue實例中
## 創建路由組件
> 在components(組件庫文件夾中)創建about.vue和home.vue文件
## 配置組件和路徑的映射關系
## 使用路由
## 最終效果如下
:-: 
## 路由是如何進行匹配？
### 打開網頁，默認顯示首頁
會獲取到hash 默認為 “/”
router.js中定義的routes中有沒有一個可以與之匹配
router-view組件則什么都不顯示
### 切換首頁時
頁面的路徑添加了hash此值為home
router.js中定義的routes中有一個path為home的和hash得到匹配
router-view組件則顯示匹配項的組件內部內容
## 路由的默認路徑
>[warning] 問題
> 默認情況下, 進入網站的首頁, 我們希望<router-view>渲染首頁的內容.
> 但是我們的實現中, 默認沒有顯示首頁組件, 必須讓用戶點擊才可以.
### 如何可以讓路徑默認跳到到首頁, 并且渲染首頁組件呢?
非常簡單, 我們只需要配置多配置一個映射就可以了
:-: 
### 配置解析:
我們在routes中又配置了一個映射.
path配置的是根路徑: /
redirect是重定向, 也就是我們將根路徑重定向到/home的路徑下, 這樣就可以得到我們想要的結果了.
# 總結
## 1.定義路由
```
//1.導入路由對象
import VueRouter from 'vue-router'
//2.注入VueRouter插件
Vue.use(VueRouter)
//3.創建路由實例 機場
var router = new VueRouter({})
//4.對路由實例設置 映射配置 航線 是一個對象
var router = new VueRouter({
routes:[
{path:'/',redirect:'/home'},
{path:'/home',component:Home}
……
]
})
export default router;
```
## 2.使用路由
在vue實例中掛載創建的路由實例
```
import router from './router/router.js'
var vm = new Vue({
router
})
```
## 3.路由組件
`<router-link>`和 `<router-view>`
>[success] 重點
> 把上面的例子一定要掌握，對于更細節的知識點后面講解就可以了。
