>[success] # 簡單弄懂VueRouter 過程 * 聲明本章節內容參考拉勾教育大前端課程整理，非原創 ~~~ 1.'Vue Router' 整體使用過程簡單的可以分為三步，'將Vue Router 注冊在Vue'，'創建Vue Router 實例' '在Vue實例傳入router對象' // 注冊插件 Vue.use(VueRouter) // 創建路由對象 const router = new VueRouter({ routes: [ { name: 'home', path: '/', component: homeComponent} ] }) // main.js // 創建 Vue 實例，注冊router 對象 new Vue({ router, render: h => h(App) }).$mount('#app') ~~~ >[info] ## 在這之前需要了解的 ~~~ 1.'Vue 構建版本區別','Vue 實例中$opitions'，'Vue.mixin', 'Vue.observable','history.pushState', 'popstate' ~~~ >[danger] ##### Vue 構建版本區別 ~~~ 1.運行時版：不支持 template 模板，需要打包的時候提前編譯（render函數） 2.完整版：包含運行時和編譯器，體機比運行時版大 10K 左右，程序運行的時候把模板轉換成 render 函數 3.vue-cli 創建的項目默認使用的是 運行時版本的 Vue，現在有一個疑問如果用vuecli搭建的項目 是運行時版本，即只能解析render函數版本，那么平常使用vue-cli開發項目的時候又是為何可以用 template 模板形式開發呢？ 答:在編譯階段利用webpack，loader 插件在編譯的過程時候就將這些'.vue'結尾文件給編譯成render 使用vuecli時候內置這種腳手架，使用了'vue-loader'，會在編譯時候進行了轉譯，將template模板寫法 轉換成render 4.來看兩個版本，'完整版'雖然默認支持template寫法，相對的在每一次運行的時候都需要將template轉換成 render 這個過程是在使用階段，這樣的耗時是對用戶體驗上的影響，'運行時版本'雖然不支持template形式 但在開發打包階段完全可以使用一些loader 幫助轉譯，這樣整體的代碼都變成了render 在用戶使用的時候 變相提示速度 5.當然如果想在使用vuecli 時候開啟template 版本，可以在'vue.config.js' 將'runtimeCompiler: true'開啟，默認是 false 不開啟 ~~~ >[danger] ##### Vue 實例中$opitions --'$options 存儲構造函數的傳入參數' ~~~ 1.使用vue 時候，打印vue實例可以看到$opitions 屬性,'$options 存儲構造函數的傳入參數',舉個例子(如圖一) const vm = new Vue({ router, ccc: 'ccc', render: h => h(App) }).$mount('#app') console.log(vm) 2.注冊組件他們this實例如圖二，這些'$opitions'中是沒有剛開始'存儲構造函數的傳入參數',但是可以通過'$opitions' 中的parent 字段一級一級往上推找到最開始的根 new Vue這個對象 ~~~ * 如圖一Vue根實例  *圖二  >[danger] ##### Vue.mixin -- 混入 ~~~ 1.關于混入可以參考當前目錄的'Vue -- 組件升級篇','Vue -- 組件通信（二）','Vue -- 組件通信（三）' 2.這里簡單總結，混入分為三種'組件'，'全局'，'自定義'，混入的遵循的規則拋開'自定義合并策略' 如果混入的值和組件值重復并在發生沖突時以組件數據優先，但是同名鉤子函數將合并為一個數組， 因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用(這里的鉤子理解成聲明周期) 3.一旦使用全局混入，它將影響'每一個'之后創建的 Vue 實例 ~~~ [關于混入參考的鏈接](https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80) [自定義混入參考的鏈接](http://www.voidcn.com/article/p-hwwhxuur-bvx.html) >[danger] ##### Vue.observable ~~~ 1.這是vue2.6 版本后新增的api，可以將讓一個'對象可響應（2.x具有get和set）'。Vue 內部會用它來 處理 data 函數返回的對象。也可以作為最小化的跨組件狀態存儲器 ~~~ * 舉個例子 ~~~ // 使用observable 聲明了一個可以讓對象變成響應'state1' 和'state2' import Vue from 'vue' const state1 = Vue.observable({ name: 'ww' }) const state2 = Vue.observable({ age: 20 }) export { state1, state2 } // 在某個組件調用 如果其他組件也調用了state1 ，那他取值時候state1.name 變成'www',可以做跨組件傳值 <template> <div> 這是 Blog 頁面{{this.$route.params.index}} </div> </template> <script> import { state1, state2 } from '../tools/observable' export default { name: 'Blog', mounted() { console.log(state1, state2) state1.name = "wwww" }, updated() { console.log(2) } } </script> ~~~ [參考鏈接](https://cn.vuejs.org/v2/api/#Vue-observable) >[danger] ##### history.pushState [參看鏈接](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState) ~~~ 1.history.pushState() 方法向當前瀏覽器會話的歷史堆棧中添加一個狀態，這樣不會請求后臺，用來做 可以用來做前端路由history模式的url ~~~ >[danger] ##### popstate ~~~ 1.在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back() 或者history.forward()方法） ~~~ [popstate](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event)