前言

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

1、什么是前端路由

（1）后端路由階段

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

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

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

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

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

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

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

（1）hash模式

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

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

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

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

（2）history模式

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

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

（3）兩種模式的比較

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

  不同：hash模式 會(huì)在瀏覽器的URL中加入'#'，而HTM5History就沒(méi)有'#'號(hào)，URL和正常的URL一樣。

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

補(bǔ)充：路由模式解析

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

如果有進(jìn)行過(guò)服務(wù)器開(kāi)發(fā)或者對(duì)http協(xié)議有所了解就會(huì)知道，瀏覽器中對(duì)頁(yè)面的訪問(wèn)是無(wú)狀態(tài)的，所以我們?cè)谇袚Q不同的頁(yè)面時(shí)都會(huì)重新進(jìn)行請(qǐng)求。而實(shí)際使用vue和vue-router開(kāi)發(fā)就會(huì)明白，在切換頁(yè)面時(shí)是沒(méi)有重新進(jìn)行請(qǐng)求的，使用起來(lái)就好像頁(yè)面是有狀態(tài)的，這是什么原因呢。

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

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

我們可以用如下代碼修改成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中的#號(hào)就被去除了。

實(shí)際上存在三種模式：

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

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

Abstract： 支持所有javascript運(yùn)行模式。如果發(fā)現(xiàn)沒(méi)有瀏覽器的API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式。

總結(jié)

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

最新評(píng)論