欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯(cuò)誤的解決

 更新時(shí)間：2019年01月31日 10:27:56   作者：madfrag  
這篇文章主要介紹了Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯(cuò)誤的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一、背景

先簡(jiǎn)單介紹一下現(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;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論