Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁(yè)面刷新導(dǎo)致404錯(cuò)誤的解決
一、背景
先簡(jiǎn)單介紹一下現(xiàn)在項(xiàng)目情況：前后端分離，后端服務(wù)是Java寫(xiě)的，前端是Vue+ElementUI。
最近的一個(gè)需求是：通過(guò)后端Api去獲取前端路由表，原因是每個(gè)登錄角色對(duì)應(yīng)的前端路由表可能是不一樣的（權(quán)限問(wèn)題）
二、遇到的問(wèn)題
因?yàn)榍岸薞ue+ElementUI項(xiàng)目是單頁(yè)應(yīng)用——即只有一個(gè)index.html頁(yè)面，如果路由從遠(yuǎn)程獲取的話，每次F5或點(diǎn)擊刷新按鈕刷新頁(yè)面的時(shí)候，就會(huì)找不到對(duì)應(yīng)的路徑而報(bào)404錯(cuò)誤
三、解決方案
1、通過(guò)api遠(yuǎn)程獲取路由，然后在前端生成對(duì)應(yīng)路由
/*
將 服務(wù)器獲得的[路由json字符串]轉(zhuǎn)換成可訪問(wèn)的[前端路由組件]
@remoteRouterMap 服務(wù)器獲得的[路由json字符串]
*/
function transformJsonToRouter(remoteRouterMap) {
const accessedRouters = remoteRouterMap.filter(route => {
if (!route.component) {
route.component = Layout
}else {
route.component = route.component.replace("@/views/","")
route.component = _import(route.component)
}
if (route.children && route.children.length) {
route.children = transformJsonToRouter(route.children)
}
return true
})
return accessedRouters
}
2、將路由模式改成history模式(vue默認(rèn)是hash模式）
export default new Router({
mode: 'history', //后端支持可開(kāi)
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap,
linkActiveClass: 'is-active'
})
3、在nginx中設(shè)置將404錯(cuò)誤指向index文件
location / {
try_files $uri $uri/ /index.html;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用vue-upload上傳圖片的詳細(xì)使用說(shuō)明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來(lái)學(xué)習(xí)吧2023-05-05
Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示,本文給大家分享一段簡(jiǎn)短的代碼通過(guò)效果圖展示給大家介紹的非常明白，需要的朋友可以參考下2022-05-05
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue中ElementUI結(jié)合transform使用時(shí)如何修復(fù)el-select彈框定位不準(zhǔn)確問(wèn)題
這篇文章主要介紹了Vue中ElementUI結(jié)合transform使用時(shí)如何修復(fù)el-select彈框定位不準(zhǔn)確問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能
這篇文章主要介紹了vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue 獲取視頻時(shí)長(zhǎng)的實(shí)例代碼
這篇文章主要介紹了vue 獲取視頻時(shí)長(zhǎng)的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式
如今的Vue3已經(jīng)勢(shì)不可擋,當(dāng)然搭建一個(gè)全新的Vue3項(xiàng)目也有了全新的方式,下面這篇文章主要給大家介紹了關(guān)于如何手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue-DPlayer是一個(gè)易于使用、高性能的基于Vue.js的視頻播放器組件,這篇文章將為大家詳細(xì)介紹一下vue-dplayer視頻播放器組件的安裝與使用,需要的小伙伴可以參考下2023-09-09
vue深度監(jiān)聽(tīng)(監(jiān)聽(tīng)對(duì)象和數(shù)組的改變)與立即執(zhí)行監(jiān)聽(tīng)實(shí)例
這篇文章主要介紹了vue深度監(jiān)聽(tīng)(監(jiān)聽(tīng)對(duì)象和數(shù)組的改變)與立即執(zhí)行監(jiān)聽(tīng)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
本文詳細(xì)介紹了如何在Vue項(xiàng)目中集成和使用富文本編輯框,并分享了一些實(shí)踐經(jīng)驗(yàn),介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開(kāi)發(fā)者在實(shí)際項(xiàng)目中根據(jù)需求進(jìn)行更多探索和定制2024-10-10