vue-router如何實現history模式配置
vue-router history模式配置
一:概述
vue-router可以設置兩種模式:hash和history
const router = new VueRouter({ mode: "hash", // mode: "history", routes });
如果使用hash模式,一般無需特殊配置;
但如果要使用history模式,則前端和服務端要做一定的設置;
使用history模式通常本地調試沒有什麼問題,但是一旦發佈到測試或生產環境,則會出現頁面白屏或者刷新頁面白屏的現象,這種問題的出現是因為前端和服務端沒有做相應的配置。
二、實現history模式需要怎樣配置
2.1、前端配置
首先要設置路由的mode和base兩個值,如下:
const routes = [...] const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, // 如果使用history模式,必須設置base參數 routes }); export default router;
其次要設置vue.config.js裡的publicPath,如下:
module.exports = { // publicPath默認值是'/',即你的應用是被部署在一個域名的根路徑上 // 設置為'./',可以避免打包後的靜態頁面空白 // 當在非本地環境時,這裡以項目test-daily為例,即打包後的h5項目部署服務器的test-daily目錄下 // 那麼這裡就要把publicPath設置為/test-daily/,表示所有的靜態資源都在/test-daily/裡 // 打包部署後,會發現index.html引用的靜態資源都添加瞭路徑/test-daily/ publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/', ...... }
如下圖所示:
至此,前端的配置工作就結束瞭。
2.2、服務端配置(這裡以nginx為例)
官網其實有介紹,隻是不太詳細,這裡直接上代碼,如下:
location /test-daily表示項目部署在瞭 /test-daily目錄下,這裡要跟vue.config.js裡的publicpath的值保持一致。
之所以刷新頁面白屏,其實是因為路由資源不存在,以本項目為例(home為首頁路由的參數):
https://test.xxx.yy/test-daily/home
當訪問上述路由時,其實根本就不存在相應的資源,當然會404瞭,為瞭避免這種情況的發生,可以讓所有的路由都指向index.html就可以解決問題瞭
在nginx上進行設置: try_files $uri $uri/ /test-daily/index.html 即可。
至此,也就實現瞭所有的history模式的配置。
mode:“history“的作用
在未設置mode:“history”,vue的路由默認是hash模式,地址欄中顯示如下:
hash:在地址欄中顯示"#"符號(這裡的hash不是密碼學中的散列運算)。例如:localhost:8080/#/index,hash的值為#/index。它的特點在於:hash雖然出現在路徑中,但是不會被包括在HTTP請求中,對後端完全沒有影響,因此改變hash不會重新加載頁面。
history利用瞭H5 history Interface中新增的pushState()和replaceState()方法。(需要特定瀏覽器支持)這兩個方法應用於瀏覽器的歷史記錄棧,在當前已有的back、forward、go的基礎上,它們提供瞭對歷史記錄進行修改的功能。隻是當它們執行修改時,雖然改變瞭當前的Url,但是瀏覽器不會立即向後端發送請求。
綜上:hash模式和history模式都屬於瀏覽器自身的特性,Vue-Router隻是利用瞭這兩個特性(通過調用瀏覽器提供的接口)來實現前端路由。
為瞭使路徑更加直觀及美觀,就需要使用history模式。隻需在router文件夾下的index.js中加入 mode:“history”
關於單頁面交互跳轉,隻需要使用router提供的方法即可。
在main.js文件配置中將router綁定到全局
Vue.prototype.router = router;
跳轉頁面如下:
<button @click="toArticle()">跳轉文章頁面</button> methods:{ toArticle() { this.$router.push('/article') } }
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue打包後出現空白頁的原因及解決方式詳解
- Vue實現hash模式網址方式(就是那種帶#的網址、井號url)
- vue-route路由管理的安裝與配置方法
- Vue項目打包部署的實戰過程記錄
- Vue項目中對index.html中BASE_URL的配置方式