本文是vue-router系列。這里從瀏覽器到vue-router原理到最佳實踐都會有詳細的講解三热。由于篇幅較長博个，建議可以選擇感興趣的目錄看空猜。

先了解了瀏覽器的history原理蓄诽，才能更好的結(jié)合vue-router源碼一步步了解它的實現(xiàn)薛训。如果這塊已經(jīng)有了解可以直接跳過。

• pushState/replaceState/popstate 解析
• vue-router 實現(xiàn)原理
• route 跟 router 的區(qū)別
• 通過路由元信息設(shè)置登錄
• 設(shè)置滾動行為
• vue 路由 按需 keep-alive
• watch 監(jiān)聽路由變化
• 如何檢測物理鍵返回
• 如何做出翻書效果
• 如何做一個優(yōu)雅的路由分區(qū)

pushState/replaceState/popstate 解析

HTML5提供了對history棧中內(nèi)容的操作仑氛。通過history.pushState/replaceState實現(xiàn)添加地址到history棧中乙埃。

pushState/replaceState() 方法
pushState() 需要三個參數(shù):

• 狀態(tài)對象
• 標題 (目前被忽略)
• (可選的) 一個URL.

讓我們來解釋下這三個參數(shù)詳細內(nèi)容：

• 狀態(tài)對象 — 狀態(tài)對象state是一個JavaScript對象，通過pushState () 創(chuàng)建新的歷史記錄條目锯岖。無論什么時候用戶導(dǎo)航到新的狀態(tài)介袜，popstate事件就會被觸發(fā)，且該事件的state屬性包含該歷史記錄條目狀態(tài)對象的副本嚎莉。

  狀態(tài)對象可以是能被序列化的任何東西。原因在于Firefox將狀態(tài)對象保存在用戶的磁盤上沛豌，以便在用戶重啟瀏覽器時使用趋箩，我們規(guī)定了狀態(tài)對象在序列化表示后有640k的大小限制。如果你給 pushState() 方法傳了一個序列化后大于640k的狀態(tài)對象加派，該方法會拋出異常叫确。如果你需要更大的空間，建議使用 sessionStorage 以及 localStorage.

• 標題 — Firefox 目前忽略這個參數(shù)芍锦，但未來可能會用到竹勉。在此處傳一個空字符串應(yīng)該可以安全的防范未來這個方法的更改÷α穑或者次乓，你可以為跳轉(zhuǎn)的state傳遞一個短標題吓歇。

• URL — 該參數(shù)定義了新的歷史URL記錄。注意票腰，調(diào)用 pushState() 后瀏覽器并不會立即加載這個URL城看，但可能會在稍后某些情況下加載這個URL，比如在用戶重新打開瀏覽器時杏慰。新URL不必須為絕對路徑测柠。如果新URL是相對路徑，那么它將被作為相對于當前URL處理缘滥。新URL必須與當前URL同源轰胁，否則 pushState() 會拋出一個異常。該參數(shù)是可選的朝扼，缺省為當前URL赃阀。

改變歷史記錄條目:

@clickA
history.pushState({ page: 1 }, "", "a.html");

@clickB
history.pushState({ page: 2 }, "", "b.html");

當歷史記錄條目更改時，將觸發(fā)popstate事件吟税。
如果被激活的歷史記錄條目是通過對history.pushState（）的調(diào)用創(chuàng)建的凹耙，或者受到對history.replaceState（）的調(diào)用的影響，popstate事件的state屬性包含歷史條目的狀態(tài)對象的副本肠仪。

需要注意的是調(diào)用history.pushState()或history.replaceState()不會觸發(fā)popstate事件肖抱。
只有在做出瀏覽器動作時，才會觸發(fā)該事件异旧，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調(diào)用history.back()）

觸發(fā)瀏覽器回退按鈕:

window.addEventListener('popstate', ()=>{
  console.log(location.href)
})

vue-router 實現(xiàn)原理

總體來說就是使用了history的方法來控制瀏覽器的路由意述，結(jié)合vue實現(xiàn)數(shù)據(jù)與視圖更新。
上面我們已經(jīng)講了history的使用原理吮蛹，接下來結(jié)合vue-router具體來看一下

安裝 vue-router

install.js

通過 Object.defineProperty 將 _router 掛載在 Vue 原型的 router 來調(diào)用 _router。使用get的好處是潮针，保證了安全性术荤，只能讀不能修改 $router。

// 項目內(nèi)可以通過 this.$router 來獲取到
Object.defineProperty(Vue.prototype, '$router', {
  get () { return this._routerRoot._router }
})

然后每篷，在 Vue.mixin 中注入 beforeCreate 鉤子函數(shù)瓣戚，每個組件都會調(diào)用 registerInstance ， 通過 Vue.util.defineReactive 將 _route 進行監(jiān)聽焦读，這樣每次進入到新的頁面就會設(shè)置當前的路由子库。

// 在 `beforeCreate` 中調(diào)用了 `registerInstance`
// 其實就是調(diào)用了 router-view 組件中的 registerRouteInstance 方法
const registerInstance = (vm, callVal) => {
  let i = vm.$options._parentVnode
  if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
    i(vm, callVal)
  }
}
Vue.mixin({
  beforeCreate () {
    if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router
        // 初始化設(shè)置監(jiān)聽 popstate
        // 并將 this._route = route
        this._router.init(this)
        // 亮點在這！４；巍仑嗅！
        // 將 _route 添加監(jiān)聽，當修改 history.current 時就可以觸發(fā)更新了
        Vue.util.defineReactive(this, '_route', this._router.history.current)
    } else {
      this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
    }
    // 注冊實例，調(diào)用 router-view 中的方法仓技，修改 route 值鸵贬，從而更新視圖
    registerInstance(this, this)
  },
  destroyed () {
    // 銷毀注冊實例，因為注冊的實例是 undefined
    registerInstance(this)
  }
})

router-view 實現(xiàn)視圖更新

router-view 是一個函數(shù)式組件浑彰，頁面中 beforeCreate 鉤子調(diào)用registerRouteInstance 來修改當前 route 實例恭理，由于 _route 已經(jīng)被監(jiān)聽了，所以當 matched.instances[name] 發(fā)生變化的時候郭变，會重新觸發(fā) render 更新視圖颜价。

components/view.js

data.registerRouteInstance = (vm, val) => {
  const current = matched.instances[name]
  // 注冊路由實例，如果與當前路由與原來路由相等則不變诉濒，如果不相等則更新實例
  if (
    (val && current !== vm) ||
    (!val && current === vm)
  ) {
    // 修改當前路由實例
    matched.instances[name] = val
  }
}

創(chuàng)建 route 對象

創(chuàng)建路由 createRoute周伦，通過解析location等操作，返回一個route對象

src/util/route.js

export function createRoute (
  record: ?RouteRecord,
  location: Location,
  redirectedFrom?: ?Location,
  router?: VueRouter
): Route {
  const stringifyQuery = router && router.options.stringifyQuery

  let query: any = location.query || {}
  try {
    query = clone(query)
  } catch (e) {}

  const route: Route = {
    name: location.name || (record && record.name),
    meta: (record && record.meta) || {},
    path: location.path || '/',
    hash: location.hash || '',
    query,
    params: location.params || {},
    fullPath: getFullPath(location, stringifyQuery),
    matched: record ? formatMatch(record) : []
  }
  if (redirectedFrom) {
    route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery)
  }
  return Object.freeze(route)
}

這里主要講了未荒，vue-router 的 install专挪，router-view 實現(xiàn)視圖渲染，create-route 創(chuàng)建路由實例片排，還有如何實現(xiàn)與vue的結(jié)合寨腔，實現(xiàn)數(shù)據(jù)綁定等。由于篇幅的問題率寡，再多細節(jié)的東西就沒有講了迫卢，有興趣大家可以翻翻源碼。

image

route 跟 router 的區(qū)別

講完原理給大家捋一下 route 跟 router 的區(qū)別冶共，通過源碼很容易看出他們的不同

• $router 是VueRouter的一個對象乾蛤，通過Vue.use(VueRouter)和VueRouter構(gòu)造函數(shù)得到一個router的實例對象，這個對象中是一個全局的對象捅僵，他包含了所有的路由包含了許多關(guān)鍵的對象和屬性家卖。
• $route 就是一個路由的對象，我們通過 createRoute 創(chuàng)建出來的 route 對象庙楚，里面包括:
  • path字符串上荡，等于當前路由對象的路徑，會被解析為絕對路徑馒闷，如 "/home/news" 酪捡。
  • params對象，包含路由中的動態(tài)片段和全匹配片段的鍵值對
  • query對象窜司，包含路由中查詢參數(shù)的鍵值對沛善。例如航揉，對于 /home/news/detail/01?favorite=yes 塞祈，會得到$route.query.favorite == 'yes' 。
  • router路由規(guī)則所屬的路由器（以及其所屬的組件）帅涂。
  • matched數(shù)組议薪，包含當前匹配的路徑中所包含的所有片段所對應(yīng)的配置參數(shù)對象尤蛮。
  • name當前路徑的名字，如果沒有使用具名路徑斯议，則名字為空产捞。

通過路由元信息，設(shè)置登錄

原理是在路由的 meta 里設(shè)置 auth 屬性哼御，進入路由之前判斷 meta.auth 是否為 true 坯临，如果為 true 再判斷，是否已經(jīng)登陸恋昼，沒有登陸的話調(diào) login 方法去登陸看靠，登陸成功后 回調(diào) code === 0 繼續(xù)進入頁面

const beforeEnter = (to, from, next) => {
  if (to.meta && to.meta.auth) {
    // 未登陸走登陸邏輯
    if (!isLogin()) {
      const nextPage = (res) => {
        if (res.code === 0) {
          next(true)
        } else {
          next(false)
        }
      };
      let targetUrl = location.href.split('#')[0] + '#' + to.fullPath
      // 這里是你的登陸邏輯
      login({
        // 回調(diào)后進入頁面
        callback: nextPage,
        // 目標頁面，登陸成功后進入目標頁面
        targetUrl: targetUrl
      });
    } else {
      next(true)
    }
  } else {
    next(true)
  }
}

在 Foo 組件設(shè)置登陸

const routes = [
  {
    path: '/Foo',
    name: 'Foo',
    meta: {
      auth: true,
    },
    component: () => ('Foo.vue'),
  },
  {
    path: '/Bar',
    name: 'Bar',
    component: () => ('Bar.vue'),
  },
]

設(shè)置滾動行為

設(shè)置滾動行為液肌，并添加路由挟炬，如果有 savedPosition 說明是第二次進入并已經(jīng)觸發(fā)過滾動，所以會滾動到之前打開的位置嗦哆，如果是第一次進入沒有savedPosition則滾動到最頂層谤祖。

const router = new Router({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  routes
})

vue 路由 按需 keep-alive

<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例老速，而不是銷毀它們粥喜。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素烁峭，也不會出現(xiàn)在父組件鏈中容客。

當組件在<keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行约郁。

<!-- 需要緩存的視圖組件 -->
<router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 不需要緩存的視圖組件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>

路由配置

const routers = [
  {
    path: '/list',
    name: 'list',
    component: () => import('./views/keep-alive/list.vue'),
    meta: {
      keepAlive: true
    }
  }
]

因為在我們項目里面經(jīng)常會有列表跳詳情缩挑，然后又詳情返回列表的情況，所以我們可以根據(jù)項目需求來判斷是否需要被緩存鬓梅，如果被緩存了就會出現(xiàn)下面的情況需要注意

watch 監(jiān)聽路由變化

有時我們需要通過給頁面?zhèn)鲄砼袛囗撁嬲故臼裁磧?nèi)容供置，比如詳情頁 #/detail?infoId=123456，我們需要根據(jù) infoId 來展示不同的內(nèi)容

我們一般習(xí)慣會這樣寫

async created() {
  const res = await this.pullData()
}

async pullData () {
  return this.$http.get('http://test.m.com/detail', { infoId })
}

當我們通過列表再次進入詳情頁時绽快，雖然infoId已經(jīng)變了infoId=234567芥丧，但是頁面并沒有改變，是因為該頁面被keep-alive了坊罢，created不會再次觸發(fā)续担，created只在創(chuàng)建的時候執(zhí)行一次。

為了解決這個問題活孩，我們就需要對 $route 進行監(jiān)聽物遇，只要 route 發(fā)生變化我們就更新頁面

watch: {
  '$route': {
    // 頁面初始化時立即觸發(fā)一次
    immediate: true,
    handler(to, from) {
      // 只有進入當前頁面的時候，拉取數(shù)據(jù)
      if(to.path === '/detail') {
        this.pullData();
      }
    }
  }
}

這樣還會帶來下面的問題，就是物理鍵返回的時候也會刷新頁面询兴，下面是對物理鍵返回的處理

如何檢測物理鍵返回

為什么要檢測物理返回鍵乃沙？比如你有這樣列表頁，點擊進去是一個詳情頁诗舰，然后返回的時候列表刷新了警儒，找不到原來的位置，這種時候?qū)τ脩舻捏w驗非常不好眶根。我們看一下例子蜀铲。

image

那么我們?nèi)绾稳?yōu)化它？
思路就是在用戶返回到列表頁的時候不刷新數(shù)據(jù)属百，只有在用戶主動進入列表的時候才會刷新數(shù)據(jù)蝙茶，我們看一下效果

下面是實現(xiàn)的代碼，原理就是監(jiān)聽 popstate诸老，當瀏覽器返回的時候會觸發(fā) popstate隆夯，這時我們標記 isBack 為 ture。在 setTimeout 0 之后判斷 isBack（是否為瀏覽器返回）别伏，如果不是瀏覽器返回的再刷新數(shù)據(jù)蹄衷。

@Component
export default {
  data() {
    return {
      // 用來判斷是否是通過返回鍵返回的
      isBack: false
    }
  },
  created () {
    // 如果是物理鍵返回的就設(shè)置 isBack = true
    this.$_onBack(()=>{
      this.isBack = true;
    });
  },
  watch: {
    '$route': {
      immediate: true,
      handler(to, from) {
        // 每次進入路由重置 isBack = false
        this.isBack = false;
        if(to.path === '/list') {
          // 等待路由的 popstate 監(jiān)聽結(jié)束
          setTimeout(()=>{
            !this.isBack && this.pullData();
          })
        }
      }
    }
  }
}

_onBack 實現(xiàn)，就是監(jiān)聽了 popstate 厘肮，因為vue-router是操作了history的狀態(tài)愧口，而瀏覽器返回的時候就會觸發(fā) popstate ，利用這個特性來判斷是否為瀏覽器返回鍵返回

_onBack(cb) {
  window.addEventListener(
    "popstate",
    (e) => {
      if(typeof cb  === 'function') {
        if(e.state) {
          cb(true)
        }
      }
    },
    false
  );
};

如何做出翻書效果

利用的是 vue 的 transition 組件类茂，結(jié)合 vue-router耍属，在路由上做一些過渡效果。先看圖說話

image

<template>
  <div class="wrap">
    <transition :name="transitionName">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>
<script>

export default {
  data() {
    return {
      transitionName: 'turning-down'
    }
  },
  watch: {
    '$route' (to, from) {
      if(to.path > from.path) {
        // 進入下一頁
        this.transitionName = 'turning-up';
      }else{
        // 返回上一頁
        this.transitionName = 'turning-down';
      }
    }
  }
}
</script>

<style scoped lang="scss">
.child-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 4s ease;
  transform-origin: 0% center;
}

.turning-down-enter{
  opacity: 1;
  transform-origin: left;
  transform-style: preserve-3d;
  -webkit-transform: perspective(1000px) rotateY(-180deg);
  transform: perspective(1000px) rotateY(-180deg);
}

.turning-up-leave-active {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(-180deg);
  z-index: 100;
}
</style>

配置路由

export default [
  {
    path: '/Home',
    name: 'home',
    component: () =>
      import('../views/vue/vue-router/Home.vue'),
    children: [
      {
        path: '/Home/First',
        name: 'Home-First',
        component: () =>
          import('../views/vue/vue-router/First.vue'),
      },
      {
        path: '/Home/Second',
        name: 'Home-Second',
        component: () =>
          import('../views/vue/vue-router/Second.vue'),
      }
    ]
  }
]

通過監(jiān)聽 Home 頁面的路由變化巩检，來改變 transitionName厚骗，路由切換時切換 transition 組件的 enter/leave-active 樣式，因此可以在路由切換時做到翻書效果兢哭。

如何做一個優(yōu)雅的路由分區(qū)

隨著項目的增大领舰，項目中的頁面可能達到好幾十個，甚至更多迟螺，那么如何將這些頁面進行管理呢冲秽？我們的做法就是，將路由按照功能進行區(qū)分矩父。

比如我們分了5個區(qū)間锉桑，每個區(qū)間有個數(shù)不同的路由

-- a.js
-- b.js
-- c.js
-- d.js
-- e.js

我們需要將這五個路由分別引進來，并進行結(jié)合

import a from 'routers/a'
import b from 'routers/b'
import c from 'routers/c'
import d from 'routers/d'
import e from 'routers/e'

const routers = [].concat(a, b, c, d, e)

以后我們每次建一個新的分區(qū)窍株，都要手動加上相應(yīng)的邏輯民轴，這樣看起來很不方便郑诺，那么我們有沒有好的解決辦法呢？

下面是我做的路由分區(qū)杉武，利用 webpack 的 require.context 方法，將所有需要的路徑導(dǎo)出來辙售，require.context 有三個參數(shù):

• 第一個參數(shù)轻抱，匹配的路徑目錄，（從當前目錄開始算起）
• 第二個參數(shù)旦部，是否需要深層遍歷
• 第三個參數(shù)祈搜，正則匹配，匹配出你需要的路徑
• 需要注意的點士八，require 不能直接導(dǎo)出變量名

例如容燕，下面的例子會報錯

const a = './route/a.js'
// 會報錯，a 不是一個模塊
require(a)

所以 require 中只能加字符串或者使用字符串拼接

const a = 'a.js'
require('./route/' + a)

這樣webpack會把 ./route/ 下所有文件打包成模塊婚度，你才可以使用 require 去引用

下面是一個完整的例子

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = []
const context = require.context('./router', true, /\/[\w]+\.(js|ts)$/)

context.keys().forEach(_ => {
  const path = _.replace('./', '')
  routes.push(...require('./router/' +  path).routes)
})

export default new Router({
  routes: [
    { path: '/', redirect: '/Home' },
    ...routes
  ]
})

本文轉(zhuǎn)至: https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651557322&idx=2&sn=a2f3ae690b0c40006bc060e7cf01d6c2&chksm=80255a0bb752d31dd374841bfb7b1becc7899692f9dc4abae0e478d232129635db195926d59c&mpshare=1&scene=1&srcid=&sharer_sharetime=1572569324026&sharer_shareid=e93fb30bf9744db0c765844460b527b5#rd