什麼是路由

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

在 vue 中使用 vue-router

1. 導入 vue-router 元件類庫：

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

1. 使用 router-link 元件來導航

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

1. 使用 router-view 元件來顯示比對到的元件

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

1. 建立使用

   Vue.extend

   建立元件

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

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

1. 建立一個路由 router 執行個體，通過 routers 屬性來定義路由比對規則

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

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

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

在路由規則中定義參數

1. 在規則中定義參數：

1. 通過

   this.$route.params

   來擷取路由中的參數：

var register = Vue.extend({
      template: '<h1>注冊元件 --- {{this.$route.params.id}}</h1>'
    });
           

使用

children

屬性實作路由嵌套

<div id="app">
    <router-link to="/account">Account</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 父路由中的元件
    const account = Vue.extend({
      template: `<div>
        這是account元件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

    // 子路由中的 login 元件
    const login = Vue.extend({
      template: '<div>登入元件</div>'
    });

    // 子路由中的 register 元件
    const register = Vue.extend({
      template: '<div>注冊元件</div>'
    });

    // 路由執行個體
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, // 使用 redirect 實作路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通過 children 數組屬性，來實作路由的嵌套
            { path: 'login', component: login }, // 注意，子路由的開頭位置，不要加 / 路徑符
            { path: 'register', component: register }
          ]
        }
      ]
    });

    // 建立 Vue 執行個體，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  </script>