????窗外的綠色滿滿撞入我的眼睛，柳絮隔著紗窗熱情的邀舞完疫，可惜我不能出去。好了债蓝，這些都是題外話壳鹤。

一、實(shí)現(xiàn)原理

• ps: “更新視圖但不重新請(qǐng)求頁面”是前端路由原理的核心之一
  (參考：https://zhuanlan.zhihu.com/p/27588422)

vue-router 三種運(yùn)行模式：

1. hash: 使用 URL hash 值("#")來作路由饰迹。默認(rèn)模式芳誓。
2. history: 依賴 HTML5 History API 和服務(wù)器配置。
3. abstract: 支持所有 JavaScript 運(yùn)行環(huán)境啊鸭，如 Node.js 服務(wù)器端锹淌。

• ps:在vue-router中是通過mode這一參數(shù)控制路由的實(shí)現(xiàn)模式的:

var router = new VueRouter({
  mode: 'history', //默認(rèn)是hash
  routes: [
    ...
  ]
});

hash模式

HTML5History

Hash模式

• hash（“#”）符號(hào)的本來作用是加在URL中指示網(wǎng)頁中的位置;
• hash雖然出現(xiàn)在URL中，但不會(huì)被包括在HTTP請(qǐng)求中莉掂。它是用來指導(dǎo)瀏覽器動(dòng)作的葛圃，對(duì)服務(wù)器端完全無用，因此憎妙，改變hash不會(huì)重新加載頁面;
• hash模式下通過hashchange方法可以監(jiān)聽url中hash的變化库正，來實(shí)現(xiàn)更新頁面部分內(nèi)容的操作：

window.addEventListener("hashchange", function(){}, false)

• 每一次改變hash，都會(huì)在瀏覽器的訪問歷史中增加一個(gè)記錄(利用HashHistory.push()或HashHistory.replace())厘唾，可以實(shí)現(xiàn)瀏覽器的前進(jìn)和后退功能褥符。

1. HashHistory.push()

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  this.transitionTo(location, route => {
    pushHash(route.fullPath)
    onComplete && onComplete(route)
  }, onAbort)
}

function pushHash (path) {
  window.location.hash = path
}

• 由此可見，push()方法最主要的是對(duì)window的hash進(jìn)行了直接賦值：

window.location.hash = route.fullPath 

• hash的改變會(huì)自動(dòng)添加到瀏覽器的訪問歷史記錄中抚垃。

  
  
  HashHistory.push().jpg

2. HashHistory.replace()

• replace()方法與push()方法不同之處在于喷楣，它并不是將新路由添加到瀏覽器訪問歷史的棧頂趟大，而是替換掉當(dāng)前的路由：

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  this.transitionTo(location, route => {
    replaceHash(route.fullPath)
    onComplete && onComplete(route)
  }, onAbort)
}
  
function replaceHash (path) {
  const i = window.location.href.indexOf('#')
  window.location.replace(
    window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path
  )
}

• 可以看出，它與push()的實(shí)現(xiàn)結(jié)構(gòu)上基本相似铣焊，不同點(diǎn)在于它不是直接對(duì)window.location.hash進(jìn)行賦值逊朽，而是調(diào)用window.location.replace方法將路由進(jìn)行替換。

總得來說就是初始化vueRouter的時(shí)候曲伊，建立路由和組件的映射關(guān)系叽讳，監(jiān)聽hashChange事件來更新路由，進(jìn)而渲染視圖

HTML5History模式

• 通過 window.history.pushState(stateObject, title, URL) 與 window.history.replaceState(stateObject, title, URL)修改瀏覽器地址坟募，觸發(fā)更新;
• 通過監(jiān)聽popstate事件監(jiān)聽瀏覽器前進(jìn)或者后退,觸發(fā)更新;

1. stateObject: 當(dāng)瀏覽器跳轉(zhuǎn)到新的狀態(tài)時(shí)岛蚤，將觸發(fā)popState事件，該事件將攜帶這個(gè)stateObject參數(shù)的副本懈糯。
2. title: 所添加記錄的標(biāo)題（暫時(shí)沒有用處）涤妒。
3. URL: 所添加記錄的URL。
   這兩個(gè)方法有個(gè)共同的特點(diǎn)：當(dāng)調(diào)用他們修改瀏覽器歷史記錄棧后赚哗，雖然當(dāng)前URL改變了她紫，但瀏覽器不會(huì)立即發(fā)送請(qǐng)求該URL，這就為單頁應(yīng)用前端路由“更新視圖但不重新請(qǐng)求頁面 ”提供了基礎(chǔ)蜂奸。
   
   history.pushState
   
   
   history.replaceState()

兩種模式比較

vue-router源碼分析：

install.js 分析

1. 首先會(huì)對(duì)重復(fù)安裝進(jìn)行過濾
2. 全局混入beforeCreate和destroyed 生命鉤子祖屏，為每個(gè)Vue實(shí)例設(shè)置 _routerRoot屬性助赞，并為根實(shí)例設(shè)置_router屬性
3. 調(diào)用Vue中定義的defineReactive對(duì)_route進(jìn)行劫持，其實(shí)是執(zhí)行的依賴收集的過程袁勺，執(zhí)行_route的get就會(huì)對(duì)當(dāng)前的組件進(jìn)行依賴收集雹食，如果對(duì)_route進(jìn)行重新賦值觸發(fā)setter就會(huì)使收集的組件重新渲染，這里也是路由重新渲染的核心所在

Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) { // 設(shè)置根路由-根組件實(shí)例
        this._routerRoot = this
        this._router = this.$options.router
        this._router.init(this)
        // 定義響應(yīng)式的 _route 對(duì)象
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else { // 非根組件設(shè)置
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })

4. 為Vue原型對(duì)象定義router和router和router和route屬性期丰，并對(duì)兩個(gè)屬性進(jìn)行了劫持群叶，使我們可以直接通過Vue對(duì)象實(shí)例訪問到
5. 全局注冊(cè)了Routerview和RouterLink兩個(gè)組件，所以我們才可以在任何地方使用這兩個(gè)組件钝荡，這兩個(gè)組件的內(nèi)容我們稍后分析

 Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

vue-router工作流程：

1. 安裝 vue-router 插件（參考 install.js分析）
2. new Router 實(shí)例
3. 根實(shí)例創(chuàng)建之前街立，執(zhí)行init方法，初始化路由
4. 執(zhí)行transitionTo方法埠通，同時(shí)hash模式下對(duì)瀏覽器hashChange事件進(jìn)行了監(jiān)聽赎离，執(zhí)行history.listen方法，將對(duì)_route重新賦值的函數(shù)賦給History實(shí)例的callback端辱，當(dāng)路由改變時(shí)對(duì)_route進(jìn)行重新賦值從而觸發(fā)組件更新
5. transitionTo方法根據(jù)傳入的路徑從我們定義的所有路由中匹配到對(duì)應(yīng)路由梁剔，然后執(zhí)行confirmTransition
6. confirmTransition首先會(huì)有重復(fù)路由的判斷虽画。如果進(jìn)入相同的路由，直接調(diào)用abort回調(diào)函數(shù)荣病，函數(shù)退出码撰，不會(huì)執(zhí)行后面的各組件的鉤子函數(shù)，這也是為什么我們重復(fù)進(jìn)入相同路由不會(huì)觸發(fā)組建的重新渲染也不會(huì)觸發(fā)路由的各種鉤子函數(shù)众雷；如果判斷不是相同路由灸拍，就會(huì)執(zhí)行各組件的鉤子函數(shù)
7. 按順序執(zhí)行好導(dǎo)航守衛(wèi)后做祝，就會(huì)執(zhí)行傳入的成功的回調(diào)函數(shù),從而對(duì)_route進(jìn)行賦值砾省，觸發(fā)setter，從而使組件重新渲染

二混槐、使用

1.路由文件的定義

/*
* 路由器模塊
* */
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import Home from '../views/home'
import Messages from '../views/messages'
import MessagesDetail from '../views/messagesDetail'


function loadView(view) {
  return () => import(`@/views/${view}.vue`)
}

var router = new VueRouter({
  mode: 'history',
  routes: [
    {
      name: 'app',
      path: '/',
      // component: App,
      redirect: '/home',
    },
    {
      name: 'about',
      path: '/about',
      component: loadView('about'),
      children: [
        {
          name: 'news',
          path: '/about/news',
          component: loadView('news')
        },
        {
          name: 'messages',
          path: '/about/messages',
          component: Messages,
          children: [
            {
              path: '/about/messages/:id',
              component: MessagesDetail,
              //主要用于寫某個(gè)指定路由跳轉(zhuǎn)時(shí)需要執(zhí)行的邏輯
              beforeEnter: (to, from, next) => {
                console.log('beforeEnter-to: ', to)
                console.log('beforeEnter-from: ', from)
                next();
              },
              afterEnter: (to, from, next) => {
                console.log('---afterEnter-to: ', to)
                console.log('---afterEnter-from: ', from)
                next()
              }
            },
          ],
          /*
          *某個(gè)路由的路由鉤子函數(shù)
          */
          //主要用于寫某個(gè)指定路由跳轉(zhuǎn)時(shí)需要執(zhí)行的邏輯
          beforeEnter: (to, from, next) => {
            console.log('beforeEnter-to: ', to)
            console.log('beforeEnter-from: ', from)
            next();
          },
          afterEnter: (to, from, next) => {
            console.log('-----afterEnter-to: ', to)
            console.log('-----afterEnter-from: ', from)
            next()
          }
        },
      ]
    },
    {
      name: 'home',
      path: '/home',
      component: Home,
    }
  ]
});
 /*
  *全局路由鉤子
  */
//這類鉤子主要作用于全局,一般用來判斷權(quán)限,以及以及頁面丟失時(shí)候需要執(zhí)行的操作
router.beforeEach((to, from, next) => {
  console.log('beforeEach-to: ', to)
  console.log('beforeEach-from: ', from)
  next();
})
router.afterEach((to, from, next) => {
  console.log('afterEach-to: ', to)
  console.log('afterEach-from: ', from)
})
export default router

vue-router的結(jié)構(gòu).jpg

• 另：需將路由全局注入main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import less from 'less'
Vue.use(less)

require('./assets/style/iconfont.css')

Vue.config.productionTip = false; //作用是阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

三编兄、有關(guān)知識(shí)點(diǎn)

1. router 與 route

先上一張圖來：

routerPKroute.jpg

• 由此可見，router是VueRouter的一個(gè)對(duì)象声登，通過Vue.use(VueRouter)和VueRouter的構(gòu)造函數(shù)得到的實(shí)力對(duì)象狠鸳，該對(duì)象是一個(gè)全局對(duì)象，包含了許多關(guān)鍵對(duì)象與屬性悯嗓，例如：history:

methods: {
        go(num){
          if (num === 1){
            this.$router.replace({ name: 'news' })
          }else if (num === 2){
            this.$router.push({ name: 'messages' })
          }
        }
      },

• $route是一個(gè)當(dāng)前路由的路由對(duì)象件舵，每個(gè)路由都會(huì)有一個(gè)route對(duì)象，是一個(gè)局部對(duì)象脯厨，可獲取對(duì)應(yīng)的name,path,params,query等

<h3>ID:{{$route.params.id}}</h3>

2. 路由鉤子（分三類）

在使用那部分已經(jīng)貼出完整的代碼铅祸，以及應(yīng)用場(chǎng)景，故此處只做簡(jiǎn)單的列舉：

• 全局路由鉤子
  ——這類鉤子主要作用于全局,一般用來判斷權(quán)限,以及以及頁面丟失時(shí)候需要執(zhí)行的操作

router.beforeEach((to, from, next) => {
  next();
})
router.afterEach((to, from, next) => {
})

• 某個(gè)路由獨(dú)有的路由鉤子
  ——主要用于寫某個(gè)指定路由跳轉(zhuǎn)時(shí)需要執(zhí)行的邏輯

beforeEnter: (to, from, next) => {
     next();
},
afterEnter: (to, from, next) => {
    next()
}

• 路由組件內(nèi)的路由鉤子

export default {
    name: "messages",
    data() {
      return {}
    },
    beforeRouteEnter (to, from, next) {
      // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
      // 不能獲取組件實(shí)例 `this`
      // 因?yàn)楫?dāng)鉤子執(zhí)行前合武，組件實(shí)例還沒被創(chuàng)建
      next();
    },
    beforeRouteUpdate (to, from, next) {
      // 在當(dāng)前路由改變临梗，但是該組件被復(fù)用時(shí)調(diào)用
      // 舉例來說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id稼跳，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候盟庞，
      // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用汤善。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用什猖。
      // 可以訪問組件實(shí)例 `this`
      next()
    },
    beforeRouteLeave (to, from, next) {
      // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
      // 可以訪問組件實(shí)例 `this`
      next()
    }
  }

3. 子路由

<router-link :to="`/about/messages/${v.id}`" class="">{{v.content}}</router-link>
<keep-alive>
      <router-view></router-view>
</keep-alive>
 .router-link-active{
        color: burlywood !important;
  }

• 在動(dòng)態(tài)組件上使用 keep-alive
  ——當(dāng)在多個(gè)組件之間切換的時(shí)候，有時(shí)會(huì)想保持這些組件的狀態(tài)红淡，以避免反復(fù)重渲染導(dǎo)致的性能問題不狮。
  (https://cn.vuejs.org/v2/guide/components-dynamic-async.html?_sw-precache=3b921049bd7cca2444e9efa512a9d9f5#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive "在動(dòng)態(tài)組件上使用 keep-alive")
• 當(dāng)組件在 <keep-alive> 內(nèi)被切換，它的 activated和 deactivated這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行锉屈。
• activated鉤子函數(shù)
  ——keep-alive 組件激活時(shí)調(diào)用荤傲。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
• deactivated鉤子函數(shù)
  ——實(shí)例銷毀之前調(diào)用颈渊。在這一步遂黍，實(shí)例仍然完全可用终佛。該鉤子在服務(wù)器端渲染期間不被調(diào)用。