快捷導(dǎo)航

vue-router 源碼實(shí)現(xiàn)前端路由的兩種方式

更新時(shí)間：2018年07月02日 15:18:00 作者：cobish

這篇文章主要介紹了vue-router 源碼實(shí)現(xiàn)前端路由的兩種方式，主要介紹Hash 路由和History 路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在學(xué)習(xí) vue-router 的代碼之前，先來簡(jiǎn)單了解一下前端路由。

前端路由主要有兩種實(shí)現(xiàn)方法：

Hash 路由
History 路由

先來看看這兩種方法的實(shí)現(xiàn)原理。

接著我們將用它們來簡(jiǎn)單實(shí)現(xiàn)一個(gè)自己的前端路由。

前端路由

Hash 路由

url 的 hash 是以 # 開頭，原本是用來作為錨點(diǎn)，從而定位到頁(yè)面的特定區(qū)域。當(dāng) hash 改變時(shí)，頁(yè)面不會(huì)因此刷新，瀏覽器也不會(huì)向服務(wù)器發(fā)送請(qǐng)求。

http://www.xxx.com/#/home

同時(shí)， hash 改變時(shí)，并會(huì)觸發(fā)相應(yīng)的 hashchange 事件。所以，hash 很適合被用來做前端路由。當(dāng) hash 路由發(fā)生了跳轉(zhuǎn)，便會(huì)觸發(fā) hashchange 回調(diào)，回調(diào)里可以實(shí)現(xiàn)頁(yè)面更新的操作，從而達(dá)到跳轉(zhuǎn)頁(yè)面的效果。

window.addEventListener('hashchange', function () {
 console.log('render');
});

History 路由

HTML5 規(guī)范中提供了 history.pushState 和 history.replaceState 來進(jìn)行路由控制。通過這兩個(gè)方法，可以實(shí)現(xiàn)改變 url 且不向服務(wù)器發(fā)送請(qǐng)求。同時(shí)不會(huì)像 hash 有一個(gè) # ，更加的美觀。但是 History 路由需要服務(wù)器的支持，并且需將所有的路由重定向到根頁(yè)面。

History 路由的改變不會(huì)去觸發(fā)某個(gè)事件，所以我們需要去考慮如何觸發(fā)路由更新后的回調(diào)。

有以下兩種方式會(huì)改變 url：

調(diào)用 history.pushState 或 history.replaceState；
點(diǎn)擊瀏覽器的前進(jìn)與后退。

第一個(gè)方式可以封裝一個(gè)方法，在調(diào)用 pushState（replaceState）后再調(diào)用回調(diào)。

function push (url) {
 window.history.pushState({}, null, url);
 handleHref();
}

function handleHref () {
 console.log('render');
}

第二個(gè)方式，瀏覽器的前進(jìn)與后退會(huì)觸發(fā) popstate 事件。

window.addEventListener('popstate', handleHref);

路由實(shí)現(xiàn)

我們通過 <a> 標(biāo)簽來進(jìn)行切換路由，通過一個(gè) <div> 標(biāo)簽來裝載各路由對(duì)應(yīng)的頁(yè)面內(nèi)容。

參考 vue-router 的調(diào)用，我們會(huì)這么地調(diào)用一個(gè) Router ，將路由與對(duì)應(yīng)組件作為參數(shù)傳入：

const router = new Router([
 {
  path: '/',
  component: 'home'
 },
 {
  path: '/book',
  component: 'book'
 },
 {
  path: '/movie',
  component: 'movie'
 }
]);

數(shù)組里是各路由對(duì)應(yīng)的要顯示的內(nèi)容，接下來就來開始實(shí)現(xiàn)這個(gè) Router 。

Hash 路由實(shí)現(xiàn)

Hash 路由 <a> 標(biāo)簽都需要帶上 # ：

<div>
 <a href="#/" rel="external nofollow" >home</a>
 <a href="#/book" rel="external nofollow" >book</a>
 <a href="#/movie" rel="external nofollow" >movie</a>
  
 <div id="content"></div>
</div>

Router 的代碼實(shí)現(xiàn)如下：

class Router {
 constructor (options) {
  this.routes = {};
  
  this.init();
  
  // 遍歷，綁定視圖更新
  options.forEach(item => {
   this.route(item.path, () => {
   	document.getElementById('content').innerHTML = item.component;
   });
  });
 }
 
 // 綁定監(jiān)聽事件
 init () {
  window.addEventListener('load', this.updateView.bind(this), false);
  window.addEventListener('hashchange', this.updateView.bind(this), false);
 }
 
 // 更新試圖
 updateView () {
  const currentUrl = window.location.hash.slice(1) || '/';
  this.routes[currentUrl] && this.routes[currentUrl]();
 }
 
 // 將路由與回調(diào)函數(shù)關(guān)聯(lián)
 route (path, cb) {
  this.routes[path] = cb;
 }
}

實(shí)現(xiàn)效果如下：

History 路由實(shí)現(xiàn)

History 路由需要服務(wù)器的支持，可以點(diǎn)擊這里的代碼參考。

<div>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-href="/" rel="external nofollow" >home</a>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-href="/book" rel="external nofollow" >book</a>
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-href="/movie" rel="external nofollow" >movie</a>
  
 <div id="content"></div>
</div>

Router 的代碼實(shí)現(xiàn)如下：

class Router {
 constructor (options) {
  this.routes = {};

  this.init();
  this.bindEvent();

  // 遍歷，綁定視圖更新
  options.forEach(item => {
   this.route(item.path, () => {
    document.getElementById('content').innerHTML = item.component;
   });
  });
 }

 // 綁定點(diǎn)擊事件
 bindEvent () {
  const _this = this;
  const links = document.getElementsByTagName('a');

  [].forEach.call(links, link => {
   link.addEventListener('click', function () {
    const url = this.getAttribute('data-href');
    _this.push(url);
   });
  });
 }

 // 綁定監(jiān)聽事件
 init () {
  window.addEventListener('load', this.updateView.bind(this), false);
  window.addEventListener('popstate', this.updateView.bind(this), false);
 }

 push (url) {
  window.history.pushState({}, null, url);
  this.updateView();
 }

 // 更新試圖
 updateView () {
  const currentUrl = window.location.pathname || '/';
  this.routes[currentUrl] && this.routes[currentUrl]();
 }

 // 將路由與回調(diào)函數(shù)關(guān)聯(lián)
 route (path, cb) {
  this.routes[path] = cb;
 }
}

實(shí)現(xiàn)效果如下：