[toc] 思路： vue-router的原理主要在于，它會監聽路由的變化，然后根據路由對應的組件，在routeMap里去尋找需要渲染到頁面上的組件，并通過h函數渲染到router-view上。 這里有兩方面可以說的，一個是路由的兩種模式，history和hash模式，另外一個就是new Router這個過程發生了是什么 vue router在創建后會被掛載到vue實例上，使得vue可以通過this.$router操作router vue-router存在兩種模式，history模式和hash模式 ### 1.vue-router核心原理 監聽頁面路由的變化，在routeMap里找到對應路由需要渲染的組件，并通過render函數 渲染到router ### 2.new Router的時候以及掛載router對象的時候發生了什么 #### 1.new Router過程 1.首先new Router對象的時候，會把傳入routes數組傳入，并建立一套path和組件的routeMap映射關系 2.監聽path變化的事件，比如load, hashchange(hash模式), popState(history模式)，并且通過vue提供的defineReactive方法，將path變成響應式的，這樣會觸發router-view組件的render函數，根據path獲取對應的component，通過h函數渲染出來 3.為什么defineReactive把path變成響應式了，就可以觸發render的更新？ 這里用了一個發布訂閱的思想，在渲染router-view組件的時候，獲取了path，這個時候添加了一個watcher，并且收集到dep中，當path改變的時候，就會通知dep上的notify()發布方法，通知watcher執行update，使得router-view重新渲染了 #### 2.掛載過程 1.構造函數提供一個install方法，接收傳入的Vue構造函數 2.混入mixin 的beforeCreate生命周期，在這時掛載$router 3.在全局上創建兩個組件，router-link和router-view，router-link控制路由的跳轉，router-view或租routeMap中對應的組件，并通過render函數渲染出來 ```js Vue.mixin({ beforeCreate() { // 全局混入，將來在組件實例化的時候才執行 // 此時 router 實例已經存在 // this 代表組件實例 if (this.$options.router) { // 掛載 Vue.prototype.$router = this.$options.router } } }) ``` ### 2.history模式和hash模式 1.history和hash在顯示上的區別在于url后綴里hash模式多了一個#號 2.hash模式修改的是錨點之后的url，并不會引起頁面的刷新，監聽的是window的load以及hashchange事件 ```js // 監聽事件 window.addEventListener('hashchange', this.onHashChange.bind(this)) window.addEventListener('load', this.onHashChange.bind(this)) // 將 # 號后面的字符串截取 onHashChange() { this.current = window.location.hash.slice(1) } ``` 3.history模式沒有#，修改路由會導致頁面的刷新，這里跳轉頁面用的是h5提供的popstate以及replaceState方法，這兩個方法改變url的path部分不會引起頁面刷新 ```js history.pushState(null, '', el.getAttribute('href')) ``` 4.history模式下的vue項目，需要后端配置路由 ```js location / { try_files $uri $uri/ /index.html; } ```