前言

路由這個概念最早在后端出現(xiàn)，隨后前后端分離，直至當(dāng)今的單頁面應(yīng)用，路由也在一直發(fā)生變化。本文來總結(jié)一下路由變化和vue-router中的路由模式區(qū)別相關(guān)知識點。

1、什么是前端路由

（1）后端路由階段

早期的頁面都是由html頁面在服務(wù)端渲染的，服務(wù)端直接返回給客戶端渲染好的html頁面供展示，一個頁面對應(yīng)一個URL,首先向服務(wù)端請求對應(yīng)的URL,服務(wù)器根據(jù)此URL去匹配對應(yīng)的controller,最終生成html頁面返回給客戶端。這種方法有利于SEO的優(yōu)化，但是這種頁面html和數(shù)據(jù)邏輯混合在一塊，開發(fā)人員開發(fā)維護起來困難。

（2）前后端分離路由階段

隨著Ajax的出現(xiàn)，由了前后端分離的開發(fā)方式，后端只負(fù)責(zé)邏輯處理和返回數(shù)據(jù)，前端只負(fù)責(zé)通過ajax將數(shù)據(jù)渲染到頁面。

（3）單頁面應(yīng)用階段

其實SPA最主要的特點就是在前后端分離的基礎(chǔ)上加了一層前端路由.也就是前端來維護一套路由規(guī)則。

2、vue-router 提供了 hash 和 history 兩種路由模式

vue-router的作用就是通過改變URL，在不重新請求頁面的情況下，更新頁面視圖。簡單的說就是，雖然地址欄的地址改變了，但是并不是一個全新的頁面，而是之前的頁面某些部分進行了修改。要想解決上面的問題，前提需要知道瀏覽器window的history對象和location對象的hash屬性(詳情見 history對象詳解)，這兩個對象分別存在頁面路徑跳轉(zhuǎn)，但是頁面不刷新的功能。

（1）hash模式

對應(yīng)了location對象的hash屬性，vue-router 默認(rèn) hash 模式,使用 URL 的 hash 來模擬一個完整的 URL，于是當(dāng) URL 改變時，頁面不會重新加載。

location.hash 對應(yīng) "(#)" 后面的字符串，比如：https://xxx.cn/xxx/6844904062698127367#heading  對應(yīng)的值為 "#heading"，后面 hash 值的變化，并不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新頁面。另外每次  hash  值的變化，還會觸發(fā) hashchange  這個事件，通過這個事件我們就可以知道 hash 值發(fā)生了哪些變化。然后我們便可以監(jiān)聽 hashchange 來實現(xiàn)更新頁面部分內(nèi)容的操作：比如下面的代碼監(jiān)聽一個網(wǎng)頁 hash 值變化

window.addEventListener('hashchange', function() {
            console.log('The hash has changed!')
        }, false);

當(dāng)網(wǎng)頁點擊返回或者前進的時候，hash值會發(fā)生變化，會觸發(fā)上面的hashchange事件并打印。

（2）history模式

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面，同時還有popstate 事件來監(jiān)聽state變化，這樣地址欄中路徑就沒有了"#",但是當(dāng)用戶使用了刷新等操作的時候，瀏覽器會給服務(wù)器發(fā)送請求，為了避免這種情況出現(xiàn)，所以這個實現(xiàn)需要服務(wù)端的支持，需要把所有路由都重定向到根路由，這里省略服務(wù)端的配置。

window.addEventListener('popstate', function() {
            console.log('The state has changed!')
        }, false);

（3）兩種模式的比較

 同：hash和history都是屬于瀏覽器自身的特性，Vue-router只是利用了這兩個特性（通過調(diào)用瀏覽器接口）來實現(xiàn)前端路由。

  不同：hash模式 會在瀏覽器的URL中加入'#'，而HTM5History就沒有'#'號，URL和正常的URL一樣。

history比于直接修改hash主要有以下優(yōu)勢：a、pushState設(shè)置的新URL可以是與當(dāng)前URL同源的任意URL；而hash只可修改#后面的部分，故只可設(shè)置與當(dāng)前同文檔的URL；b、pushState設(shè)置的新URL可以與當(dāng)前URL一模一樣，這樣也會把記錄添加到棧中；而hash設(shè)置的新值必須與原來不一樣才會觸發(fā)記錄添加到棧中；c、pushState通過stateObject可以添加任意類型的數(shù)據(jù)到記錄中；而hash只可添加短字符串，且pushState可額外設(shè)置title屬性供后續(xù)使用。

補充：路由模式解析

要講vue-router的路由模式，首先要了解的一點就是路由是由多個URL組成的，使用不同的URL可以相應(yīng)的導(dǎo)航到不同的位置。

如果有進行過服務(wù)器開發(fā)或者對http協(xié)議有所了解就會知道，瀏覽器中對頁面的訪問是無狀態(tài)的，所以我們在切換不同的頁面時都會重新進行請求。而實際使用vue和vue-router開發(fā)就會明白，在切換頁面時是沒有重新進行請求的，使用起來就好像頁面是有狀態(tài)的，這是什么原因呢。

這其實是借助了瀏覽器的History API來實現(xiàn)的，這樣可以使得頁面跳轉(zhuǎn)而不刷新，頁面的狀態(tài)就被維持在瀏覽器中了。

vue-router中默認(rèn)使用的是hash模式，也就是會出現(xiàn)如下的URL：，URL中帶有#號

我們可以用如下代碼修改成history模式：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export default new Router({
  <strong>mode: </strong><strong>'history'</strong><strong>,</strong>
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

這樣子URL中的#號就被去除了。

實際上存在三種模式：

Hash: 使用URL的hash值來作為路由。支持所有瀏覽器。

History: 以來HTML5 History API 和服務(wù)器配置。參考官網(wǎng)中HTML5 History模式

Abstract： 支持所有javascript運行模式。如果發(fā)現(xiàn)沒有瀏覽器的API，路由會自動強制進入這個模式。

總結(jié)

到此這篇關(guān)于vue前端路由以及vue-router兩種模式的文章就介紹到這了,更多相關(guān)vue路由及vue-router模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論