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 相关文章推荐
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
JavaScript中this详解
Sep 01 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
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
ThinkPHP登录功能的实现方法
2014/08/20 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
javascript Function函数理解与实战
2017/12/01 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python中enumerate函数用法实例分析
2015/05/20 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python迭代器常见用法实例分析
2019/11/22 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Python hmac模块使用实例解析
2019/12/24 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
面试自我评价范文
2014/09/17 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
校本培训个人总结
2015/02/28 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
离婚律师函范本
2015/05/27 职场文书