Vue实现远程获取路由与页面刷新导致404错误的解决


Posted in Javascript onJanuary 31, 2019

一、背景

先简单介绍一下现在项目情况:前后端分离,后端服务是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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue中的mvvm模式讲解
Jan 31 #Javascript
Vue和React组件之间的传值方式详解
Jan 31 #Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 #Javascript
async/await优雅的错误处理方法总结
Jan 30 #Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 #Javascript
JavaScript之解构赋值的理解
Jan 30 #Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 #Javascript
You might like
PHP实现文件安全下载
2006/10/09 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python实现文字版扫雷
2020/04/24 Python
flask项目集成swagger的方法
2020/12/09 Python
python中实现栈的三种方法
2020/12/19 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
财务工作者先进事迹材料
2014/01/17 职场文书
大学校庆策划书
2014/01/31 职场文书
教师党员一句话承诺
2014/03/28 职场文书
医师定期考核实施方案
2014/05/07 职场文书
关于环保的宣传稿
2015/07/23 职场文书
生产设备维护保养制度
2015/08/06 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript