vue-router如何實現(xiàn)history模式配置
vue-router history模式配置
一:概述
vue-router可以設(shè)置兩種模式:hash和history
const router = new VueRouter({ mode: "hash", // mode: "history", routes });
如果使用hash模式,一般無需特殊配置;
但如果要使用history模式,則前端和服務(wù)端要做一定的設(shè)置;
使用history模式通常本地調(diào)試沒有什么問題,但是一旦發(fā)布到測試或生產(chǎn)環(huán)境,則會出現(xiàn)頁面白屏或者刷新頁面白屏的現(xiàn)象,這種問題的出現(xiàn)是因為前端和服務(wù)端沒有做相應(yīng)的配置。
二、實現(xiàn)history模式需要怎樣配置
2.1、前端配置
首先要設(shè)置路由的mode和base兩個值,如下:
const routes = [...] const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, // 如果使用history模式,必須設(shè)置base參數(shù) routes }); export default router;
其次要設(shè)置vue.config.js里的publicPath,如下:
module.exports = { // publicPath默認(rèn)值是'/',即你的應(yīng)用是被部署在一個域名的根路徑上 // 設(shè)置為'./',可以避免打包后的靜態(tài)頁面空白 // 當(dāng)在非本地環(huán)境時,這里以項目test-daily為例,即打包后的h5項目部署服務(wù)器的test-daily目錄下 // 那么這里就要把publicPath設(shè)置為/test-daily/,表示所有的靜態(tài)資源都在/test-daily/里 // 打包部署后,會發(fā)現(xiàn)index.html引用的靜態(tài)資源都添加了路徑/test-daily/ publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/', ...... }
如下圖所示:
至此,前端的配置工作就結(jié)束了。
2.2、服務(wù)端配置(這里以nginx為例)
官網(wǎng)其實有介紹,只是不太詳細(xì),這里直接上代碼,如下:
location /test-daily表示項目部署在了 /test-daily目錄下,這里要跟vue.config.js里的publicpath的值保持一致。
之所以刷新頁面白屏,其實是因為路由資源不存在,以本項目為例(home為首頁路由的參數(shù)):
https://test.xxx.yy/test-daily/home
當(dāng)訪問上述路由時,其實根本就不存在相應(yīng)的資源,當(dāng)然會404了,為了避免這種情況的發(fā)生,可以讓所有的路由都指向index.html就可以解決問題了
在nginx上進行設(shè)置: try_files $uri $uri/ /test-daily/index.html 即可。
至此,也就實現(xiàn)了所有的history模式的配置。
mode:“history“的作用
在未設(shè)置mode:“history”,vue的路由默認(rèn)是hash模式,地址欄中顯示如下:
hash:在地址欄中顯示"#"符號(這里的hash不是密碼學(xué)中的散列運算)。例如:localhost:8080/#/index,hash的值為#/index。它的特點在于:hash雖然出現(xiàn)在路徑中,但是不會被包括在HTTP請求中,對后端完全沒有影響,因此改變hash不會重新加載頁面。
history利用了H5 history Interface中新增的pushState()和replaceState()方法。(需要特定瀏覽器支持)這兩個方法應(yīng)用于瀏覽器的歷史記錄棧,在當(dāng)前已有的back、forward、go的基礎(chǔ)上,它們提供了對歷史記錄進行修改的功能。只是當(dāng)它們執(zhí)行修改時,雖然改變了當(dāng)前的Url,但是瀏覽器不會立即向后端發(fā)送請求。
綜上:hash模式和history模式都屬于瀏覽器自身的特性,Vue-Router只是利用了這兩個特性(通過調(diào)用瀏覽器提供的接口)來實現(xiàn)前端路由。
為了使路徑更加直觀及美觀,就需要使用history模式。只需在router文件夾下的index.js中加入 mode:“history”
關(guān)于單頁面交互跳轉(zhuǎn),只需要使用router提供的方法即可。
在main.js文件配置中將router綁定到全局
Vue.prototype.router = router;
跳轉(zhuǎn)頁面如下:
<button @click="toArticle()">跳轉(zhuǎn)文章頁面</button> methods:{ toArticle() { this.$router.push('/article') } }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
- vue3配置router路由并實現(xiàn)頁面跳轉(zhuǎn)功能
- Vue3路由配置createRouter、createWebHistory、useRouter和useRoute詳解
- Vue3實戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例
- Vue-Router的routes配置詳解
- Vue Router history模式的配置方法及其原理
- vue-router的使用方法及含參數(shù)的配置方法
- 使用vue-router為每個路由配置各自的title
- vue router 配置路由的方法
- vue-router+nginx 非根路徑配置方法
- vue中的Router基本配置命令實例詳解
相關(guān)文章
vue基于mint-ui實現(xiàn)城市選擇三級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了vue基于mint-ui實現(xiàn)城市選擇三級聯(lián)動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-04-04解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問題
這篇文章主要給大家介紹了如何解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問題,文中有相關(guān)的代碼講解,需要的朋友可以參考下2023-08-08vue使用vue-video-player插件播放視頻的步驟講解
在最近的項目中有一個視頻播放的功能,在之前的項目中沒有接觸過類似的功能,第一次接觸,把具體操作步驟一下,這篇文章主要給大家介紹了關(guān)于vue使用vue-video-player插件播放視頻的相關(guān)資料,需要的朋友可以參考下2022-12-12vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程
大家都知道vue.js通過v-on完成事件處理與綁定,但最近使用v-on的時候遇到了一個問題,所以下面這篇文章主要給大家介紹了關(guān)于vue.js中v-on:textInput無法執(zhí)行事件問題的解決過程,需要的朋友可以參考下。2017-07-07