vue-router是什麼？有哪些路由模式？

1.vue-router是什麼

vue-router是Vue.js官方的路由外掛，它和vue.js是深度整合的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是元件的切換。路由模組的本質 就是建立起url和頁面之間的對映關係。

2.路由模式

vue-router有3種路由模式：hash，history，adstract.預設是hash，

1.切換路由模式

我們可以用如下程式碼修改成history模式

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

2.hash模式

原理: 在 url 中的 # 之後對應的是 hash 值, 其原理是通過hashChange() 事件監聽hash值的變化, 根據路由表對應的hash值來判斷載入對應的路由載入對應的元件
優點:
(1) 只需要前端配置路由表, 不需要後端的參與
(2) 相容性好, 瀏覽器都能支援
(3) hash值改變不會向後端傳送請求, 完全屬於前端路由
缺點:

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

　　上面的程式碼可以通過改變hash來改變頁面字型顏色，雖然沒什麼用，但是一定程度上說明了原理。

3.history

原理：history API 是 H5 提供的新特性，允許開發者直接更改前端路由，即更新瀏覽器 URL 地址

優點:
(1) 符合url地址規範, 不需要#, 使用起來比較美觀
缺點:
(1) 在使用者手動輸入地址或重新整理頁面時會發起url請求, 後端需要配置index.html頁面使用者匹配不到靜態資源的情況, 否則會出現404錯誤
(2) 相容性比較差, 是利用了 HTML5 History物件中新增的 pushState() 和 replaceState() 方法,需要特定瀏覽器的支援.

只能改變#後面的url片段，history api可以分為兩大部分：切換和修改

（1）切換歷史狀態

　　包括back、forward、go三個方法，對應瀏覽器的前進，後退，跳轉操作

history.go(2);//前進兩次
history.back(); //後退
hsitory.forward(); //前進

（2）修改歷史狀態

　　包括了pushState、replaceState兩個方法，這兩個方法接收三個引數：stateObj，title，url