您好,登錄后才能下訂單哦!
小編給大家分享一下vue-router history模式服務(wù)器端配置的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
history模式是指使用HTML5的historyAPI實(shí)現(xiàn)客戶端路由的模式,它的典型表現(xiàn)就是去除了hash模式中url路徑中的#。在使用Vue-Router時(shí)開(kāi)啟history模式非常容易,只需要在實(shí)例化路由時(shí)傳入mode:'history'配置項(xiàng)即可,但缺少服務(wù)端支持時(shí),基于historyAPI的路由無(wú)法從url地址欄直接訪問(wèn)指定頁(yè)面,這個(gè)很容易理解,因?yàn)閡rl地址欄里輸入后回車(chē)相當(dāng)于發(fā)送了一次GET請(qǐng)求,那么不帶#的路由路徑就和普通的API接口是一樣的,既然服務(wù)端并沒(méi)有定義這樣的接口,那直接訪問(wèn)時(shí)出現(xiàn)404頁(yè)面就很正常了。
官方示例
官方提供了很多處理這種場(chǎng)景的方式,以node.js版本的處理方案為例:
const http = require('http') const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort) })
不難看出,它的處理思路就是所有請(qǐng)求都強(qiáng)制重定向到首頁(yè),相當(dāng)于服務(wù)端屏蔽了訪問(wèn)資源不存在的情況,而將路由的工作留給客戶端自己去處理,這樣啟用了history模式的前端路由在直接定位到子頁(yè)面時(shí)就不會(huì)報(bào)錯(cuò)了。
vue-router的history模式需要將路由配置中的mode設(shè)置成history,同時(shí)還需要在服務(wù)器端進(jìn)行相應(yīng)的配置。
與hash模式相比,在history模式下,頁(yè)面的url中會(huì)少一些如#這樣的符號(hào):
hash:www.example.com/#/login
history:www.example.com/login
單頁(yè)應(yīng)用程序中,在history模式下瀏覽器會(huì)向服務(wù)器請(qǐng)求這個(gè)頁(yè)面,但是服務(wù)器端并不存在這個(gè)頁(yè)面于是就返回404。所以這個(gè)時(shí)候就需要給服務(wù)器端進(jìn)行配置:除了靜態(tài)資源以外都需要返回單頁(yè)應(yīng)用的index.html。
服務(wù)器配置——nodejs
在nodejs服務(wù)器中需要引入connect-history-api-fallback這個(gè)模塊來(lái)處理history模式,并在使用處理靜態(tài)資源的中間件前使用這個(gè)模塊:
const path = require('path') // 導(dǎo)入處理history模式的模塊 const history = require('connect-history-api-fallback') const express = require('express') const app = express() // 注冊(cè)處理history模式的中間件 app.use(history()) // 處理靜態(tài)資源的中間件 app.use(express.static(path.join(__dirname, './web'))) app.listen(3000, () => { console.log('service started at port 3000') })
服務(wù)器配置——nginx
先將打包后的文件放入html文件夾下,再打開(kāi)conf文件夾下nginx.conf文件,修改如下配置:
http { # ...other config server { # ...other config location / { root html; index index.html index.htm; try_files $uri $uri/ /index.html; } } }
看完了這篇文章,相信你對(duì)“vue-router history模式服務(wù)器端配置的示例分析”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。