路由，其實就是指向的意思，當我點選頁面上的home按鈕時，頁面中就要顯示home的內容，如果點選頁面上的about 按鈕，頁面中就要顯示about 的內容。Home按鈕  => home 內容， about按鈕 => about 內容，也可以說是一種對映. 所以在頁面上有兩個部分，一個是點選部分，一個是點選之後，顯示內容的部分。 

　　點選之後，怎麼做到正確的對應，比如，我點選home 按鈕，頁面中怎麼就正好能顯示home的內容。這就要在js 檔案中配置路由。

　　路由中有三個基本的概念 route, routes, router。

　　　　1， route，它是一條路由，由這個英文單詞也可以看出來，它是單數， Home按鈕  => home內容， 這是一條route,  about按鈕 => about 內容， 這是另一條路由。

　　　　2， routes 是一組路由，把上面的每一條路由組合起來，形成一個數組。[{home 按鈕 =>home內容 }， { about按鈕 => about 內容}]

　　　　3， router 是一個機制，相當於一個管理者，它來管理路由。因為routes 只是定義了一組路由，它放在哪裡是靜止的，當真正來了請求，怎麼辦？ 就是當用戶點選home 按鈕的時候，怎麼辦？這時router 就起作用了，它到routes 中去查詢，去找到對應的 home 內容，所以頁面中就顯示了 home 內容。

　　　　4，客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候，about 中的內容全部隱藏，反之也是一樣。客戶端路由有兩種實現方式：基於hash 和基於html5 history api.

　　vue-router中的路由也是基於上面的內容來實現的

　　在vue中實現路由還是相對簡單的。因為我們頁面中所有內容都是元件化的，我們只要把路徑和元件對應起來就可以了，然後在頁面中把元件渲染出來。

　　1， 頁面實現（html模版中）

　　　　在vue-router中, 我們看到它定義了兩個標籤<router-link> 和<router-view>來對應點選和顯示部分。<router-link> 就是定義頁面中點選的部分，<router-view> 定義顯示部分，就是點選後，區配的內容顯示在什麼地方。所以 <router-link> 還有一個非常重要的屬性 to，定義點選之後，要到哪裡去， 如：<router-link  to="/home">Home</router-link>

　　2， js 中配置路由

　　　　首先要定義route,  一條路由的實現。它是一個物件，由兩個部分組成： path和component.  path 指路徑，component 指的是元件。如：{path:’/home’, component: home}

　　　　我們這裡有兩條路由，組成一個routes: 

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

　　最後建立router 對路由進行管理，它是由建構函式 new vueRouter() 建立，接受routes 引數。

const router = new VueRouter({
      routes // routes: routes 的簡寫
})

　　配置完成後，把router 例項注入到 vue 根例項中,就可以使用路由了

const app = new Vue({
  router
}).$mount('#app')

　　執行過程：當用戶點選 router-link 標籤時，會去尋找它的 to 屬性， 它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home}  path 一一對應，從而找到了匹配的元件， 最後把元件渲染到 <router-view> 標籤所在的地方。所有的這些實現才是基於hash 實現的。

 vue-cli 建立一個專案體驗一下, 當然不要忘記安裝vue-router

　　1, 在src 目錄下新建兩個元件，home.vue 和 about.vue

<template>
    <div>
        <h1>home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是home 元件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>about</h1>
        <p>{{aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是about元件'
            }
        }
    }
</script>

　　2, 在 App.vue中 定義<router-link > 和 </router-view>  

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定義點選後導航到哪個路徑下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 對應的元件內容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<script>
export default {
  
}
</script>

　　3,  在 src目錄下再新建一個router.js 定義router, 就是定義 路徑到 元件的 對映。

import Vue from "vue";
import VueRouter from "vue-router";

// 引入元件
import home from "./home.vue";
import about from "./about.vue";

// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    }
]

var router =  new VueRouter({
    routes
})
export default router;