Vue实现远程获取路由与页面刷新导致404错误的解决
更新时间：2019年01月31日 10:27:56 作者：madfrag
这篇文章主要介绍了Vue实现远程获取路由与页面刷新导致404错误的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一、背景
先简单介绍一下现在项目情况：前后端分离，后端服务是Java写的，前端是Vue+ElementUI。
最近的一个需求是：通过后端Api去获取前端路由表，原因是每个登录角色对应的前端路由表可能是不一样的（权限问题）
二、遇到的问题
因为前端Vue+ElementUI项目是单页应用——即只有一个index.html页面，如果路由从远程获取的话，每次F5或点击刷新按钮刷新页面的时候，就会找不到对应的路径而报404错误
三、解决方案
1、通过api远程获取路由，然后在前端生成对应路由
/*
将 服务器获得的[路由json字符串]转换成可访问的[前端路由组件]
@remoteRouterMap 服务器获得的[路由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中设置将404错误指向index文件
location / {
try_files $uri $uri/ /index.html;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用vue-upload上传图片的详细使用说明，文中有相关的代码示例供大家参考，感兴趣的小伙伴一起跟着小编来学习吧2023-05-05
这篇文章主要介绍了Vue ECharts实现机舱座位选择展示,本文给大家分享一段简短的代码通过效果图展示给大家介绍的非常明白，需要的朋友可以参考下2022-05-05
Vue3+Vite中不支持require的方式引入本地图片的解决方案
这篇文章主要介绍了Vue3+Vite中不支持require的方式引入本地图片的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题
这篇文章主要介绍了Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
vue开发chrome插件，实现获取界面数据和保存到数据库功能
这篇文章主要介绍了vue开发chrome插件，实现获取界面数据和保存到数据库功能的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue 获取视频时长的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
如今的Vue3已经势不可挡,当然搭建一个全新的Vue3项目也有了全新的方式,下面这篇文章主要给大家介绍了关于如何手把手教你创建vue3项目的最佳方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件,这篇文章将为大家详细介绍一下vue-dplayer视频播放器组件的安装与使用,需要的小伙伴可以参考下2023-09-09
这篇文章主要介绍了vue深度监听(监听对象和数组的改变)与立即执行监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文详细介绍了如何在Vue项目中集成和使用富文本编辑框,并分享了一些实践经验,介绍了为什么需要富文本编辑框,Vue中常用的富文本编辑器,以及如何安装、配置和使用Vue-Quill-Editor,本文还提供了一些基本的配置示例,帮助开发者在实际项目中根据需求进行更多探索和定制2024-10-10
最新评论