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