history路由

history模式是指使用HTML5的historyAPI實現客戶端路由的模式，它的典型表現就是去除了hash模式中url路徑中的#。在使用vue-Router時開啟history模式非常容易，只需要在例項化路由時傳入mode:'history'配置項即可，但缺少服務端支援時，基於historyAPI的路由無法從url位址列直接訪問指定頁面，這個很容易理解，因為url位址列裡輸入後回車相當於傳送了一次GET請求，那麼不帶#的路由路徑就和普通的API介面是一樣的，既然服務端並沒有定義這樣的介面，那直接訪問時出現404頁面就很正常了。

官方示例

官方提供了很多處理這種場景的方式，以node.

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://loc
 
程式設計客棧alhost:%s',httpPort)
})

不難看出，它的處理思路就是所有請求都強制重定向到首頁，相當於服務端遮蔽了訪問資源不存在的情況，而將路由的工作留給客戶端自己去處理，這樣啟用了history模式的前端路由在直接定位到子頁面時就不會報錯了。

vue-router history模式配置

vqRhwtRuZCue-router的history模式需要將路由配置中的mode設定成history，同時還需要在伺服器端進行相應的配置。

與hash模式相比，在history模式下，頁面的url中會少一些如#這樣的符號：

hash：www.example.com/#/login

history：www.example.com/login

單頁應用程式中，在history模式下瀏覽器會向伺服器請求這個頁面，但是伺服器端並不存在這個頁面於是就返回404。所以這個時候就需要給伺服器端進行配置：除了靜態資源以外都需要返回單頁應用的index.html。

伺服器配置——nodejs

在nodejs伺服器中需要引入connect-history-api-fallback這個模組來處理history模式，並在使用處理靜態資源的中介軟體前使用這個模組：

const path = require('path')
// 匯入處理history模式的模組
const history = require('connect-history-api-fallback')
const express = require('express')

const app = express()

// 註冊處理history模式的中介軟體
app.use(history())
// 處理靜態資源的中介軟體
app.use(express.static(path.join(__dirname,'./web')))

app.listen(3000,() => {
www.cppcns.com    console.log('service started at port 3000')
})

伺服器配置——nginx

先將打包後的檔案放入html資料夾下，再開啟conf資料夾下nginx.conf檔案，修改如下配置：

http {
    # ...other config
    server {
        # ...other config
        location / {
            root html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

總結

到此這篇關於vue-router history模式伺服器端配置的文章就介紹到這了,更多相關vue-router hist程式設計客棧ory模式配置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！