vue路由的兩種模式配置以及history模式下面后端如何配置
1、hash ——即地址欄URL中的#符號。
hash 雖然出現URL中,但不會被包含在HTTP請求中,對后端完全沒有影響,因此改變hash不會重新加載頁面。
2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定瀏覽器支持
history模式,會出現404 的情況,需要后台配置。
3、hash模式下,僅hash符號之前的內容會被包含在請求中,如 http://www.baidu.com, 因此對於后端來說,即使沒有做到對路由的全覆蓋,也不會返回404錯誤;
history模式下,前端的url必須和實際向后端發起請求的url 一致,如http://www.baidu.com/a/ 。如果后端缺少對/a 的路由處理,將返回404錯誤。
const router = new VueRouter({ mode: 'history', routes: [...] })
history模式下配置nginx
location / {
try_files $uri $uri/ /index.html;
}
history模式下配置Apache
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>
history模式下配置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) })