Vue路由配置history模式

2021-10-04 17:25:15 字數 1157 閱讀 6529

我的部落格:

你可以用 script 標籤的形式引入vue.min.js 這樣的,不需要nodejs。

使用node有幾件事,打包部署,解析vue單檔案元件,解析每個vue模組,拼在一起,轉碼es6,less等,啟動測試伺服器 localhost:8080, 幫你管理 vue-router等外掛程式。

所以每次當我們使用npm run dev的時候,頁面會開啟乙個localhost:3000的頁面,這其實就是node為我們啟動了乙個node.js 靜態檔案伺服器。

vue-router預設 hash 模式 —— 使用 url 的 hash 來模擬乙個完整的 url,於是當 url 改變時,頁面不會向後端發出請求。

當你使用 history 模式時,url 就像正常的 url,例如 ,也好看!

不過這種模式要玩好,還需要後台配置支援。因為我們的應用是個單頁客戶端應用,如果後台沒有正確的配置,當使用者在瀏覽器直接訪問 就會返回 404,這就不好看了。

前面不是說了,我們vue啟動了nodejs靜態檔案伺服器了嗎?為啥還不能直接使用history?

如果你在 history 模式下使用 vue router,是無法搭配簡單的靜態檔案伺服器的(也就是說你需要配置一下就可以借助這個nodejs使用history模式了,預設是不提供的)

例如,如果你使用 vue router 為 /todos/42/ 定義了乙個路由,開發伺服器也已經配置了相應的 localhost:3000/todos/42 響應,但是乙個為生產環境構建架設的簡單的靜態伺服器會卻會返回 404。

為了解決這個問題,你需要配置生產環境伺服器,將任何沒有匹配到靜態檔案的請求回退到 index.html。

形如webpack-dev-server --history-api-fallback,不過一般都是放到scripts節點下,如:

// package.json

"scripts"

:

// webpack.config.js

devserver:

vue路由history模式配置

本篇文章給大家帶來的內容是關於vue路由history模式重新整理頁面時出現404問題的兩種解決方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。vue hash模式下,url中存在 用 history 模式就能解決這個問題。但是history模式會出現重新整理頁面後,頁面出現40...

Vue路由配置history模式

我的部落格 你可以用 script 標籤的形式引入vue.min.js 這樣的,不需要nodejs。使用node有幾件事,打包部署,解析vue單檔案元件,解析每個vue模組,拼在一起,轉碼es6,less等,啟動測試伺服器 localhost 8080,幫你管理 vue router等外掛程式。所以...

VUE路由的hash模式與history模式的區別

hash模式url帶 號,history模式不帶 號。通過history api,我們丟掉了醜陋的 但是它也有個問題 不怕前進,不怕後退,就怕重新整理,f5,如果後端沒有準備的話 因為重新整理是實實在在地去請求伺服器的,不玩虛的。在hash模式下,前端路由修改的是 中的資訊,而瀏覽器請求時是不帶它玩...