為什么需要前端路由

在前后端分離的現(xiàn)在，大部分應(yīng)用的展示方式都變成了 SPA（單頁(yè)面應(yīng)用 Single Page Application）的模式。為什么會(huì)選擇 SPA 呢？原因在于：

用戶的所有操作都在同一個(gè)頁(yè)面下進(jìn)行，不進(jìn)行頁(yè)面的跳轉(zhuǎn)。用戶體驗(yàn)好。 對(duì)比多頁(yè)面，單頁(yè)面不需要多次向服務(wù)器請(qǐng)求加載頁(yè)面（只請(qǐng)求一次.html文件），只需要向服務(wù)器請(qǐng)求數(shù)據(jù)（多虧了 ajax）。因此，瀏覽器不需要渲染整個(gè)頁(yè)面。用戶體驗(yàn)好。

歸根結(jié)底，還是因?yàn)?SPA 能夠提供更好的用戶體驗(yàn)。

為了更好地實(shí)現(xiàn) SPA，前端路由是必不可少的。假設(shè)一個(gè)場(chǎng)景：用戶在 SPA 頁(yè)面的某個(gè)狀態(tài)下，點(diǎn)擊了強(qiáng)制刷新按鈕。如果沒(méi)有前端路由記住當(dāng)前狀態(tài)，那么用戶點(diǎn)擊該按鈕之后，就會(huì)返回到最開(kāi)始的頁(yè)面狀態(tài)。這不是用戶想要的。

當(dāng)然，需要前端路由另一個(gè)點(diǎn)在于：我們可以更好地進(jìn)行 SPA 頁(yè)面的管理。通過(guò)將組件與路由發(fā)生配對(duì)關(guān)聯(lián)，依據(jù)路由的層級(jí)關(guān)系，可為 SPA 內(nèi)部的組件劃分與管理提供一個(gè)依據(jù)參考。

Hash 路由模式 與 History 路由模式

這是兩種常見(jiàn)的前端路由模式。

Hash 路由模式

Hash 模式使用了瀏覽器 URL 后綴中的#xxx部分來(lái)實(shí)現(xiàn)前端路由。默認(rèn)情況下，URL后綴中的#xxx hash 部分是用來(lái)做網(wǎng)頁(yè)的錨點(diǎn)功能的，現(xiàn)在前端路由看上了這個(gè)點(diǎn)，并對(duì)其加以利用。比如這個(gè) URL：http://www.abc.com/#/hello，hash 的值為 #/hello。

為什么會(huì)看上瀏覽器URL后綴中的 hash 部分呢？原因也簡(jiǎn)單：

瀏覽器URL后綴中的 hash 改變了，不會(huì)觸發(fā)請(qǐng)求，對(duì)服務(wù)器完全沒(méi)有影響。它的改變不會(huì)重新加載瀏覽器頁(yè)面。 更關(guān)鍵的一點(diǎn)是，因?yàn)閔ash發(fā)生變化的url都會(huì)被瀏覽器記錄下來(lái)，從而你會(huì)發(fā)現(xiàn)瀏覽器的前進(jìn)后退都可以用了，頁(yè)面的狀態(tài)與瀏覽器的URL就發(fā)生了掛鉤。

hash模式背后的原理是onhashchange事件,可以在window對(duì)象上監(jiān)聽(tīng)這個(gè)事件。

History 路由模式

隨著 HTML5 中 history api 的到來(lái)，前端路由開(kāi)始進(jìn)化了。hashchange 只能改變 # 后面的代碼片段，history api （pushState、replaceState、go、back、forward） 則給了前端完全的自由。簡(jiǎn)單講，它的功能更為強(qiáng)大了：分為兩大部分，切換和修改。

路由切換

參考MDN，切換歷史狀態(tài)包括 back、forward、go 三個(gè)方法，對(duì)應(yīng)瀏覽器的前進(jìn)，后退，跳轉(zhuǎn)操作。

history.go(-2);//后退兩次history.go(2);//前進(jìn)兩次history.back(); //后退hsitory.forward(); //前進(jìn)

路由修改

修改歷史狀態(tài)包括了pushState,replaceState兩個(gè)方法：

/** ** 參數(shù)含義 ** state: 需要保存的數(shù)據(jù)，這個(gè)數(shù)據(jù)在觸發(fā)popstate事件時(shí)，可以在event.state里獲取 ** title：標(biāo)題，基本沒(méi)用，一般傳 null ** url：設(shè)定新的歷史記錄的 url */ window.history.pushState(state, title, url) //假設(shè)當(dāng)前的url是：https://www.abc.com/a///例子1history.pushState(null, null, ’./cc/’) //此時(shí)的url為https://www.abc.com/a/cc///例子2history.pushState(null, null, ’/bb/’) //此時(shí)的url為https://www.abc.com/bb/

同樣的，history 模式可以監(jiān)聽(tīng)到對(duì)應(yīng)的事件：

window.addEventListener('popstate', function() {// 監(jiān)聽(tīng)瀏覽器前進(jìn)后退事件，pushState 與 replaceState 方法不會(huì)觸發(fā) });

History 模式的注意點(diǎn)

和 Hash 模式相比，History 模式存在著更多的選擇。但是也有一些自身的注意點(diǎn)：在用戶點(diǎn)擊強(qiáng)制刷新的時(shí)候，History 模式會(huì)向服務(wù)器發(fā)送請(qǐng)求。

為了解決這個(gè)問(wèn)題，需要服務(wù)器做對(duì)應(yīng)的處理。服務(wù)器可以針對(duì)不同的URL進(jìn)行處理，當(dāng)然，也可以簡(jiǎn)單處理：只要是未匹配到的URL請(qǐng)求，一律返回同一個(gè) index.html 頁(yè)面。

Vue Router 做了什么？

Vue Router 作為 Vue 生態(tài)系統(tǒng)中非常重要的一個(gè)成員，它實(shí)現(xiàn)了 Vue 應(yīng)用的路由管理?？梢哉f(shuō)，Vue Router 是專門(mén)為 Vue 量身定制的路由管理器，功能點(diǎn)非常多。它的內(nèi)部實(shí)現(xiàn)是與 Vue 自身是有強(qiáng)耦合關(guān)系的（Vue Router 內(nèi)部利用了 Vue 的數(shù)據(jù)響應(yīng)式）。我們來(lái)看一個(gè)典型的 Vue Router 配置：

import Vue from 'vue';import App from './vue/App.vue';import VueRouter from ’vue-router’;//以插件的形式，使用VueRouterVue.use(VueRouter);//路由配置信息，可以從外部文件引入，在此直接寫(xiě)是為了方便演示const Foo = { template: ’<div>foo</div>’ }const Bar = { template: ’<div>bar</div>’ }const routes = [ { path: ’/’, component: Foo }, { path: ’/bar’, component: Bar }]//初始化并與 Vue 實(shí)例關(guān)聯(lián)const router = new VueRouter({routes});new Vue({ router, render: h => h(App),}).$mount('#root');

可看出，VueRouter 是作為插件的形式引入到 Vue 系統(tǒng)內(nèi)部的。而將具體的 router 信息嵌入到每個(gè) Vue 實(shí)例中，則是作為 Vue 的構(gòu)造函數(shù)參數(shù)傳入。

同時(shí)來(lái)看看如何使用它：

//routerExample.vue<template> <div> <h1 @click='goBack'>App Test</h1> <router-link to='/'>foo</router-link> <router-link to='/bar'>bar</router-link> <router-view></router-view> </div></template><script>export default { methods: { goBack() { console.log(this.$router); window.history.length > 1 ? this.$router.go(-1) : this.$router.push(’/’) } }}</script><style lang='less' scoped></style>

上面的代碼中，我們可以直接使用router-link和router-view這兩個(gè)組件。它們是隨著 Vue Router 一起引入的，作為全局組件使用。

這就是一個(gè)最簡(jiǎn)單的 Vue Router 的使用方式。我們下面就來(lái)看看，該如何自己實(shí)現(xiàn)上面的簡(jiǎn)單功能，做一個(gè)自己的 Vue Router。

一個(gè)簡(jiǎn)單的 Vue Router 實(shí)現(xiàn)

看了上面的這個(gè)過(guò)程，最簡(jiǎn)單的 Vue Router 應(yīng)該包括以下實(shí)現(xiàn)步驟：

實(shí)現(xiàn) Vue 規(guī)定的插件的寫(xiě)法，將我們自己的Vue Router 作為插件引入 Vue 系統(tǒng)中。

router功能一：解析傳入的routes選項(xiàng)，以備調(diào)用 router功能二：監(jiān)控URL變化（兩種路由方式：history、hash）

實(shí)現(xiàn)兩個(gè)全局組件：router-link和router-view

看看自定義的 Vue Router 的實(shí)現(xiàn)：

//FVueRouter.js let Vue; //保存 Vue 構(gòu)造函數(shù)的引用，與 Vue 深度綁定 class FVueRouter { constructor(options){ this.$options = options; //保存路由的路徑與路由組件的對(duì)應(yīng)關(guān)系 this.routerMap = {}; //當(dāng)前的URL必須是響應(yīng)式的，使用一個(gè)新的 Vue 實(shí)例來(lái)實(shí)現(xiàn)響應(yīng)式功能 this.app = new Vue({ data: {current : '/'} }) } init(){ //監(jiān)聽(tīng)路由事件 this.bindEvents(); //解析傳入的routes this.createRouterMap(); //全局組件的聲明 this.initComponent(); } bindEvents(){ window.addEventListener(’hashchange’, this.onHashChange.bind(this)); } onHashChange(){ this.app.current = window.location.hash.slice(1) || ’/’; } createRouterMap(){ this.$options.routes.forEach(route => { this.routerMap[route.path] = route; }) } initComponent() { // 形式：<router-link to='/'> 轉(zhuǎn)換目標(biāo)=> <a href='http://www.b3g6.com/bcjs/11635.html#/' rel='external nofollow' >xxx</a> Vue.component('router-link', { props: { to: String, }, render(h) { // h(tag, data, children) return h(’a’, {attrs: {href: ’#’ + this.to} }, [this.$slots.default]) }, }); // 獲取path對(duì)應(yīng)的Component將它渲染出來(lái) Vue.component('router-view', { render: (h) => {//此處的this 能夠正確指向 FVouter內(nèi)部，是因?yàn)榧^函數(shù)const Component = this.routerMap[this.app.current].component;return h(Component) } }) } } // 所有的插件都需要實(shí)現(xiàn)install 方法，傳入?yún)?shù)是Vue的構(gòu)造函數(shù) FVueRouter.install = function(_Vue){ //將Vue的構(gòu)造函數(shù)保存起來(lái) Vue = _Vue; //實(shí)現(xiàn)一個(gè)混入操作的原因，插件的install階段非常早，此時(shí)并沒(méi)有Vue實(shí)例 //因此，使用mixin，延遲對(duì)應(yīng)操作到Vue實(shí)例構(gòu)建的過(guò)程中來(lái)執(zhí)行。 Vue.mixin({ beforeCreate(){ //獲取到Router的實(shí)例，并將其掛載在原型上 if(this.$options.router){//根組件beforeCreate時(shí)只執(zhí)行一次Vue.prototype.$router = this.$options.router;this.init(); } } }) }export default FVueRouter;

這里是最為簡(jiǎn)單的一種實(shí)現(xiàn)。有幾個(gè)值得注意的點(diǎn)：

如上代碼，將最基本的一個(gè)Vue Router 的代碼架子搭建起來(lái)了，能夠運(yùn)行。但細(xì)微處依然需要酌情考慮。 關(guān)于插件的寫(xiě)法：自定義插件內(nèi)部必須實(shí)現(xiàn)一個(gè) install 方法，傳入?yún)?shù)是Vue的構(gòu)造函數(shù)。 使用了一個(gè)新的Vue 實(shí)例，將 URL 的 hash 變量進(jìn)行數(shù)據(jù)響應(yīng)化處理。 關(guān)于渲染函數(shù) render 的參數(shù) h，它實(shí)際上是 createElement 函數(shù)。具體用法值得深究。代碼中使用的是最為簡(jiǎn)單的處理方式。

結(jié)尾

在本文中，我們講解了 前端路由常見(jiàn)的兩種模式：Hash 模式與 History 模式。同時(shí)，我們嘗試自己實(shí)現(xiàn)了一個(gè)最為簡(jiǎn)單的 Vue Router。更多相關(guān)的 Vue Router 的細(xì)節(jié)，可以參考其官網(wǎng)。希望本文對(duì)你有用。

到此這篇關(guān)于Vue Router的手寫(xiě)實(shí)現(xiàn)方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue Router手寫(xiě)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！