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

創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的安圖網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

為什么要使用Vue

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

一、背景

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

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

二、遇到的問題

因為前端Vue+ElementUI項目是單頁應(yīng)用——即只有一個index.html頁面，如果路由從遠程獲取的話，每次F5或點擊刷新按鈕刷新頁面的時候，就會找不到對應(yīng)的路徑而報404錯誤

三、解決方案

1、通過api遠程獲取路由，然后在前端生成對應(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默認是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實現(xiàn)遠程獲取路由與頁面刷新導(dǎo)致404錯誤怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！