前端路由

1、什麼是前端路由

提起路由，平時咱們最熟悉的是路由器，根據數據包的目的ip進行正確的轉發。前端路由能夠類比路由器，根據url顯示不一樣的頁面。因爲ajax的出現，可讓前端實現不用刷新頁面也能夠獲取新的內容，所以有兩種基於ajax的前端路由實現方式。

2、前端路由實現方式

一、history方式

html5 history的api中提供了history.pushState()和history.replaceState()以及一個事件window.onpopstate()

history.pushState(stateObj, title, url)

這個方法用於建立一條新的歷史記錄並指向傳入的url，參數表stateObj用於傳入當前的狀態對象，title通常會被忽略，能夠傳入一個空字符串，url是要跳轉的連接（通常是相對路徑）

history.replaceState(stateObj, title, url)

它基本和pushState差很少，惟一不一樣的地方在於它不會建立新的歷史記錄，只是會把當前的歷史記錄的url替換掉

window.onpopstate()

它的觸發條件十分苛刻，基本上能夠用於在用上面兩個方法建立的歷史記錄之間導航（前進或後退），同時，前面2個方法所設置的狀態對象（第1個參數），也會在這個時候經過事件的event.state返還回來

history方式是用ajax請求替代<a>的跳轉，同時利用history方法替換url，新的url必須和前一個url同源，不然會報錯，因此無需刷新頁面；可是它的缺點是html5的history API可能會有些瀏覽器不兼容

本部分參考

二、hash方式

咱們常常在 url 中看到 #，這個 # 有兩種狀況，一個是咱們所謂的錨點，好比典型的回到頂部按鈕原理、Github 上各個標題之間的跳轉等，路由裏的 # 不叫錨點，咱們稱之爲 hash，大型框架的路由系統大多都是哈希實現的（由於hash的兼容性較好）。它主要依靠window.onhashchange監聽hash發生改變的時候，而後經過window.location處理hashchange事件，這種狀況下頁面不會從新渲染，能夠經過註冊ajax請求完成頁面的刷新

本部分參考

3、vue-router

vue官方支持的router，api：https://router.vuejs.org/

一、命名路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

二、嵌套路由

onst router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

三、歷史模式

vue-router提供了一個history模式，在使用hash方式實現路由的功能的狀況下，url中不會顯示#

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})