面試題系列---【vue-router是什么？有哪些路由模式？實現原理是什么】

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值改變不會向后端發送請求, 完全屬於前端路由
缺點:
(1) hash值前面需要加#, 不符合url規范,也不美觀

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 地址而不重新發起請求(將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