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