vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解
主要是因?yàn)榛顒?dòng)頁會(huì)存在pc端的時(shí)候未登錄的用戶也需要訪問的問題，因?yàn)槲吹卿浻脩粼诨顒?dòng)頁面進(jìn)行操作的時(shí)候會(huì)觸發(fā)到登錄事件，然后我們實(shí)現(xiàn)的方式是通過接口來判斷，該接口標(biāo)記的是一個(gè)upn的值
然后登錄的時(shí)候是單點(diǎn)登錄，不知道是否回調(diào)地址不支持vue形式下hash模式的路由，因而自動(dòng)忽視了后面的#路徑
然后我查了一下一般回調(diào)以后#后都會(huì)默認(rèn)為書簽，我轉(zhuǎn)義了然而還是只能職別#之前的路徑
由于不是很清楚登錄單點(diǎn)那一塊而且他們暫時(shí)實(shí)現(xiàn)沒有什么業(yè)務(wù)問題（當(dāng)然開始~~就是不穩(wěn)定，現(xiàn)在有時(shí)候還是會(huì)有不穩(wěn)定的問題）所以暫時(shí)不存在讓他們的回調(diào)地址支持vue的hash模式路由的問題
然后我就只能修改vue Router的路由模式，修改為了hostory模式
好吧，摸索了很久不然可能真的沒有辦法解決
運(yùn)維部署的活動(dòng)地址線上的路徑是 https://xxxxx.xxxxl.com/activity
我做了兩處修改
1、修改模式
2、切到網(wǎng)站路徑下的/activity
3、其它路徑切到/activity/
當(dāng)然這么處理以后本地運(yùn)行出來肯定是白板。因?yàn)榉奖阄乙话闶乔械轿募A下直接 run的
沒有再本地使用搭建本地的所以，需要兩份路由一份只修改模式，一份繼修改模式又切換路徑
然后這樣只是代碼上的處理我們還需要修改服務(wù)端的配置
基于運(yùn)維良好的配合，才能嘗試出來，很是開心
他們本來對(duì)活動(dòng)做的配置
參考router官方文檔https://router.vuejs.org/zh-cn/essentials/history-mode.html
使用 try命令嘗試多種配置
location / { try_files $uri $uri/ /index.html; }
然后完成這些設(shè)置以后線上終于可以訪問 https://xxxxx.xxxxx.com/activity/valentine
這種路徑的形式了，當(dāng)然這個(gè)地址是實(shí)際存在的，它并不會(huì)跳轉(zhuǎn)到配置的路由的首頁
以上這篇vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用視頻作為網(wǎng)頁背景的實(shí)現(xiàn)指南
在現(xiàn)代網(wǎng)頁設(shè)計(jì)中,視頻背景逐漸成為一種流行的設(shè)計(jì)趨勢(shì),它不僅能夠提升網(wǎng)頁的動(dòng)態(tài)效果,還可以在視覺上抓住用戶的注意力,本文將詳細(xì)講解如何在頁面中使用視頻作為背景,并確保內(nèi)容可見、頁面元素布局合理,需要的朋友可以參考下2024-10-10
Vue組件Draggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue組件Draggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家介紹了vue3組件庫Shake抖動(dòng)組件搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Vue中使用touchstart、touchmove、touchend與click沖突問題
這篇文章主要介紹了Vue中使用touchstart、touchmove、touchend與click沖突問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了Vue中的table表單切換實(shí)現(xiàn)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
svg圖片在項(xiàng)目中使用的非常廣泛,下面這篇文章主要給大家介紹了關(guān)于vue3使用svg圖標(biāo)的多種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟
寫后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
KeepAlive 是 vue 中的內(nèi)置組件，當(dāng)多個(gè)組件動(dòng)態(tài)切換時(shí)可以對(duì)實(shí)例狀態(tài)進(jìn)行緩存，本文就來詳細(xì)的介紹一下Vue中KeepAlive內(nèi)置緩存使用，感興趣的可以了解一下2023-10-10