Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁(yè)面刷新導(dǎo)致404錯(cuò)誤怎么辦
這篇文章主要介紹Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁(yè)面刷新導(dǎo)致404錯(cuò)誤怎么辦，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的安圖網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
為什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。
一、背景
先簡(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;
}以上是“Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁(yè)面刷新導(dǎo)致404錯(cuò)誤怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
標(biāo)題名稱：Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁(yè)面刷新導(dǎo)致404錯(cuò)誤怎么辦
瀏覽路徑：http://m.jiaotiyi.com/article/gjjjsg.html