什麼是路由
後端路由：對於普通的網站，所有的超連結都是URL地址，所有的URL地址都對應伺服器上對應的資源；
前端路由：對於單頁面應用程式來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程式中的頁面跳轉主要用hash實現；
在單頁面應用程式中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由）；

在 vue 中使用 vue-router匯入 vue-router 元件類庫：

xxxxxxxxxx <!-- 1. 匯入 vue-router 元件類庫 -->  <script src="./lib/vue-router-2.7.0.js"></script>

使用 router-link 元件來導航

<!-- 2. 使用 router-link 元件來導航 -->
<router-link to="/login">登入</router-link>
<router-link to="/register">註冊</router-link>

使用 router-view 元件來顯示匹配到的元件

<!-- 3. 使用 router-view 元件來顯示匹配到的元件 -->
<router-view></router-view>

建立使用Vue.extend建立元件

// 4.1 使用 Vue.extend 來建立登入元件
    var login = Vue.extend({
      template: '<h1>登入元件</h1>'
    });

    // 4.2 使用 Vue.extend 來建立註冊元件
    var register = Vue.extend({
      template: '<h1>註冊元件</h1>'
    });

建立一個路由 router 例項，通過 routers 屬性來定義路由匹配規則

// 5. 建立一個路由 router 例項，通過 routers 屬性來定義路由匹配規則
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

使用 router 屬性來使用路由規則

// 6. 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規則
    });