Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯誤怎么辦

這篇文章主要介紹Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯誤怎么辦，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

一、背景

先簡單介紹一下現(xiàn)在項(xiàng)目情況：前后端分離，后端服務(wù)是Java寫的，前端是Vue+ElementUI。

最近的一個需求是：通過后端Api去獲取前端路由表，原因是每個登錄角色對應(yīng)的前端路由表可能是不一樣的（權(quán)限問題）

二、遇到的問題

因?yàn)榍岸薞ue+ElementUI項(xiàng)目是單頁應(yīng)用——即只有一個index.html頁面，如果路由從遠(yuǎn)程獲取的話，每次F5或點(diǎn)擊刷新按鈕刷新頁面的時候，就會找不到對應(yīng)的路徑而報(bào)404錯誤　　

三、解決方案

1、通過api遠(yuǎn)程獲取路由，然后在前端生成對應(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錯誤指向index文件

location / {
 try_files $uri $uri/ /index.html;
}

以上是“Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯誤怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！