學習路由筆記:http://www.cnblogs.com/SamWeb/p/6610733.html

路由懶載入的設定請參考:http://www.cnblogs.com/lijuntao/p/7777581.html

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

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

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

<router-link> 和<router-view> <router-link  to="/home">Home</router-link>

3: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 實現的。

4：動態路由

5：巢狀路由

6：命名路由

7：程式設計式導航

這主要應用到按鈕點選上。當點選按鈕的時候，跳轉另一個元件, 這隻能用程式碼，呼叫rourter.push() 方法。 當們把router 注入到根例項中後，元件中通過 this.$router 可以獲取到router, 所以在元件中使用

this.$router.push("home"), 就可以跳轉到home介面