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

先了解了瀏覽器的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)對象
• 標(biāo)題 (目前被忽略)
• (可選的) 一個URL.

讓我們來解釋下這三個參數(shù)詳細(xì)內(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.

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

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

改變歷史記錄條目:

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

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

當(dāng)歷史記錄條目更改時，將觸發(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 進(jìn)行監(jiān)聽，這樣每次進(jìn)入到新的頁面就會設(shè)置當(dāng)前的路由。

// 在 `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)聽，當(dāng)修改 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 來修改當(dāng)前 route 實例，由于 _route 已經(jīng)被監(jiān)聽了，所以當(dāng) matched.instances[name] 發(fā)生變化的時候，會重新觸發(fā) render 更新視圖。

components/view.js

data.registerRouteInstance = (vm, val) => {
  const current = matched.instances[name]
  // 注冊路由實例，如果與當(dāng)前路由與原來路由相等則不變，如果不相等則更新實例
  if (
    (val && current !== vm) ||
    (!val && current === vm)
  ) {
    // 修改當(dāng)前路由實例
    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ù)綁定等。由于篇幅的問題，再多細(xì)節(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字符串，等于當(dāng)前路由對象的路徑，會被解析為絕對路徑，如 "/home/news" 。
  • params對象，包含路由中的動態(tài)片段和全匹配片段的鍵值對
  • query對象，包含路由中查詢參數(shù)的鍵值對。例如，對于 /home/news/detail/01?favorite=yes ，會得到$route.query.favorite == 'yes' 。
  • router路由規(guī)則所屬的路由器（以及其所屬的組件）。
  • matched數(shù)組，包含當(dāng)前匹配的路徑中所包含的所有片段所對應(yīng)的配置參數(shù)對象。
  • name當(dāng)前路徑的名字，如果沒有使用具名路徑，則名字為空。

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

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

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)后進(jìn)入頁面
        callback: nextPage,
        // 目標(biāo)頁面，登陸成功后進(jìn)入目標(biāo)頁面
        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ìn)入并已經(jīng)觸發(fā)過滾動，所以會滾動到之前打開的位置，如果是第一次進(jìn)入沒有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)在父組件鏈中。

當(dāng)組件在<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 })
}

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

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

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

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

如何檢測物理鍵返回

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

image

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

下面是實現(xiàn)的代碼，原理就是監(jiān)聽 popstate，當(dāng)瀏覽器返回的時候會觸發(fā) popstate，這時我們標(biāo)記 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) {
        // 每次進(jìn)入路由重置 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) {
        // 進(jìn)入下一頁
        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ū)

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

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

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

我們需要將這五個路由分別引進(jìn)來，并進(jìn)行結(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ù)，匹配的路徑目錄，（從當(dāng)前目錄開始算起）
• 第二個參數(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