前言

本篇主要從web應用中頁面跳轉方式來說明目前web開發技術中常見的兩種頁面路由方式及對應的技術，然後根據不同的路由方式對應的技術來闡述不同技術的優劣以及在我認為未來web開發的技術發展趨勢。

路由

什麼是路由？提到路由，可能第一反應是無線路由器，但這裡的路由指的是頁面跳轉的規則，我們常見的網站，從A頁面跳轉到B頁面是如何定義的，頁面內容如何回顯，這些都可以算作是web路由的一部分。路由分為前端路由和後端路由，早在2014年之前做web開發我用的最多的是jsp，和jsp相當的還有asp、C#，那時候前端路由的概念幾乎不存在。隨著後來的react、vue、angular(應該很早就有了，我個人沒接觸過)前端框架的興起，nodeJs越來越火，前端路由、js一統江湖的呼聲越來越高。我原本對這些前端技術不感冒，總覺得html、js這些解釋性語言沒什麼意思。但是後來去了解了下模組化開發、vue、元件化開發這些知識，發現前端技術真是日新月異，尤其單頁應用的概念更是重新整理了我對web開發的認知。我認為不管是從開發角度、編碼角度、還是從產品的使用者體驗來說，前端路由單頁應用的優勢都非常明顯。

後端路由

一般情況後端路由的專案有以下幾個特點：

1.前端的頁面資源和後端服務是在一個專案中，釋出部署的時候也是在一塊

2.頁面請求的url全部要通過後端服務的過濾器進行過濾和處理，即：所有請求會先走後端服務

3.前端瀏覽器顯示的頁面資訊是通過後端服務直接response的，頁面的內容是後端進行加工和處理的

使用後端路由進行開發的一些優勢：

1.強大的jstl標籤，jsp標準庫的應用讓開發效率大大提升

2.程式碼編寫自由度高

我實在是想不到更多的優勢了，然後之前一直用jsp。

說一下我認為的缺點：

1.前後端程式碼耦合比較深

2.體驗不夠好，每次請求都要重新向伺服器發起請求，慢。

3.必須執行在java的web容器裡

4.大的web專案在開發和管理上比較麻煩

專案中可能引入的js檔案或者css檔案多的時候可能有10幾個以上，每一個檔案都是要消耗網路請求的時間的，這對使用者體驗有很大的影響。而每次頁面的跳轉都會重新進行這些請求，越大的專案，使用者體驗越差。

前端路由

我對前端路由的認識主要是通過vue-router，簡單來說，前端路由的宗旨是模擬瀏覽器的前進後退，即讓你可以通過點選返回和前進進行頁面的跳轉，但是重點在於，頁面的跳轉和切換可以簡單的理解為div的切換。相比較原來的後端路由，現在的前端路由就沒有原來意義上的頁面跳轉，全部都是div的動態切換。

這也就意味著，頁面的跳轉和切換，只需要請求資料，關注介面資料的改變即可。不會再去重新請求js檔案及css檔案，這種體驗可以說是質的飛躍啊。

仔細想想，這就是原生APP開發的理念。

寫到這裡，在搜尋相關知識的時候，發現網上有各路大大寫的關於這方面的博文，寫的非常好，參考這裡，我就不班門弄斧了。下面記錄下自己個人的一些理解和認知。

1.移動網際網路的興起，APP的開發，讓前後端分離開發的方式變的越來越主流，我在2015年的時候，就嘗試過讓團隊內部進行前後端分離開發，後端只負責資料，負責介面，負責高併發請求。前端只負責資料展示、html、css這些。前後端的開發只通過介面文件進行耦合和對接，後端對自己的介面按照介面文件進行自測，保證接口出參正確。前端自己模擬接口出參進行頁面開發，然後是聯調對接，按照這種方式，聯調對接成功率幾乎是100%，只要介面文件沒有發生變化就行。

但是當時的方式有點雖然說前後端分離，但是前端的開發還是很原始，我們只是使用html進行開發，頁面的跳轉全部使用location.href進行跳轉，這種方式依舊有前面提到的問題，每次頁面跳轉都會涉及到js/css的重新請求，對於使用者體驗非常不好。

2.新的單頁應用卻是質的不同。開發的時候，進行元件化開發，所有的樣式和功能都能封裝為一個獨立的元件，複用性、獨立性都非常好，而且降低耦合。最關鍵的是，在打包釋出的時候，整個前端專案只有一個js檔案，一個html檔案。頁面只有在第一次進入的時候會請求一次js和html，後面所有的頁面跳轉及渲染，都只是非同步的資料請求。這種使用者體驗可以說是質的提升。