您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“vue-router怎么實(shí)現(xiàn)history模式配置”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue-router怎么實(shí)現(xiàn)history模式配置”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
vue-router可以設(shè)置兩種模式:hash和history
const router = new VueRouter({ mode: "hash", // mode: "history", routes });
如果使用hash模式,一般無需特殊配置;
但如果要使用history模式,則前端和服務(wù)端要做一定的設(shè)置;
使用history模式通常本地調(diào)試沒有什么問題,但是一旦發(fā)布到測(cè)試或生產(chǎn)環(huán)境,則會(huì)出現(xiàn)頁面白屏或者刷新頁面白屏的現(xiàn)象,這種問題的出現(xiàn)是因?yàn)榍岸撕头?wù)端沒有做相應(yīng)的配置。
2.1、前端配置
首先要設(shè)置路由的mode和base兩個(gè)值,如下:
const routes = [...] const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, // 如果使用history模式,必須設(shè)置base參數(shù) routes }); export default router;
其次要設(shè)置vue.config.js里的publicPath,如下:
module.exports = { // publicPath默認(rèn)值是'/',即你的應(yīng)用是被部署在一個(gè)域名的根路徑上 // 設(shè)置為'./',可以避免打包后的靜態(tài)頁面空白 // 當(dāng)在非本地環(huán)境時(shí),這里以項(xiàng)目test-daily為例,即打包后的h6項(xiàng)目部署服務(wù)器的test-daily目錄下 // 那么這里就要把publicPath設(shè)置為/test-daily/,表示所有的靜態(tài)資源都在/test-daily/里 // 打包部署后,會(huì)發(fā)現(xiàn)index.html引用的靜態(tài)資源都添加了路徑/test-daily/ publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/', ...... }
如下圖所示:
至此,前端的配置工作就結(jié)束了。
2.2、服務(wù)端配置(這里以nginx為例)
官網(wǎng)其實(shí)有介紹,只是不太詳細(xì),這里直接上代碼,如下:
location /test-daily表示項(xiàng)目部署在了 /test-daily目錄下,這里要跟vue.config.js里的publicpath的值保持一致。
之所以刷新頁面白屏,其實(shí)是因?yàn)槁酚少Y源不存在,以本項(xiàng)目為例(home為首頁路由的參數(shù)):
https://test.xxx.yy/test-daily/home
當(dāng)訪問上述路由時(shí),其實(shí)根本就不存在相應(yīng)的資源,當(dāng)然會(huì)404了,為了避免這種情況的發(fā)生,可以讓所有的路由都指向index.html就可以解決問題了
在nginx上進(jìn)行設(shè)置: try_files $uri $uri/ /test-daily/index.html 即可。
至此,也就實(shí)現(xiàn)了所有的history模式的配置。
在未設(shè)置mode:“history”,vue的路由默認(rèn)是hash模式,地址欄中顯示如下:
hash:在地址欄中顯示"#"符號(hào)(這里的hash不是密碼學(xué)中的散列運(yùn)算)。例如:localhost:8080/#/index,hash的值為#/index。它的特點(diǎn)在于:hash雖然出現(xiàn)在路徑中,但是不會(huì)被包括在HTTP請(qǐng)求中,對(duì)后端完全沒有影響,因此改變hash不會(huì)重新加載頁面。
history利用了H5 history Interface中新增的pushState()和replaceState()方法。(需要特定瀏覽器支持)這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧,在當(dāng)前已有的back、forward、go的基礎(chǔ)上,它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時(shí),雖然改變了當(dāng)前的Url,但是瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。
綜上:hash模式和history模式都屬于瀏覽器自身的特性,Vue-Router只是利用了這兩個(gè)特性(通過調(diào)用瀏覽器提供的接口)來實(shí)現(xiàn)前端路由。
為了使路徑更加直觀及美觀,就需要使用history模式。只需在router文件夾下的index.js中加入 mode:“history”
關(guān)于單頁面交互跳轉(zhuǎn),只需要使用router提供的方法即可。
在main.js文件配置中將router綁定到全局
Vue.prototype.router = router;
跳轉(zhuǎn)頁面如下:
<button @click="toArticle()">跳轉(zhuǎn)文章頁面</button> methods:{ toArticle() { this.$router.push('/article') } }
讀到這里,這篇“vue-router怎么實(shí)現(xiàn)history模式配置”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。