VUE二级路由刷新时报错

Vue路由刷新时出现404问题的解决方案 这样,当在浏览器中刷新页面时,服务器会返回index.html,并由Vue Router来处理相应的路由逻辑。具体做法是,在路由跳转时使用history.pushState来修改URL,使其对应到正确的路由路径。然而,当用户手动刷新页面或直接输入某个路由地址时,由于服务器并没有为该路由提供相应的资源,就会导致404错误。根据具体情况选择适合的解决方案,可以有效地解决路由刷新时的404问题,并提升用户体验。当我们将项目部署到服务器的子目录时,配置正确的基本路径可以避免路由刷新时出现404问题。 阅读详情

在使用vue搭建运行一个项目时,碰到一个奇怪的问题,从首页跳到二级页面的话页面能正常显示,但是在二级页面里刷新的时候页面就白屏了,然后在控制台中发现有报错:
在这里插入图片描述

比如访问:http://10.82.26.124:8097/正常,从这个页面跳转到:http://10.82.26.124:8097/prf-assessment-objectlist/self 时也正常,但是在这个 http://10.82.26.124:8097/prf-assessment-objectlist/self 页面刷新时就不正常了

修改vue…config.js 中 publicPath: ‘/’,,将其设置为绝对路径,然后需要重新启动项目。

散户逆袭神器:用通达信DIY指数发现下一个光伏储能(附龙头股筛选模板) 本文详细介绍了如何利用通达信软件的自定义指数功能,构建个人专属的行业监控工具,以发现类似光伏储能这样的潜力赛道。文章提供了从零开始的指数编制步骤、核心的龙头股筛选模板,以及五个关键的数据校验技巧,帮助散户投资者实现机构级的行业分析与机会挖掘,有效提升投资决策能力。 阅读详情

相关推荐

Windows 高精度计时器:QueryPerformanceCounter 原理、陷阱与最佳实践

本文深入解析Windows高精度计时器QueryPerformanceCounter(QPC)的工作原理、常见陷阱及最佳实践。QPC通过读取硬件计时器(如TSC)实现微秒级精度,适用于游戏开发、音视频处理等高性能场景。文章详细探讨了多核同步、动态频率调整等挑战,并提供了优化代码示例和性能对比数据。

weixin_33391446的博客 270

vue 动态路由刷新失效及404页面处理

vue动态路由时会遇到一些坑,这里总结一下,并提供解决思路。

Gao_wbe的博客 7507

多台树莓派(主机)通信

在做无人机实验时,有个任务需要 两台无人机 或 无人机与小车 进行通信。 由于我们飞机上用了树莓派,相当于一台电脑,索性选用Socket网络编程。 条件:树莓派、局域网(手机热点或路由器)。需要通信的两台树莓派接入同一个局域网。 如若现场没有网络,可将树莓派配置为无线路由器,发射wifi。网上很多教程,注意一点是树莓派需要先用网线接入路由器再配置。 发送数据: # -*- coding...

LNL_LNL的博客 7687

Vue-router在history模式下二级页面刷新404问题

当使用Vue Router的history模式时,在刷新二级页面时出现404 NGINX的字样,通常是由于服务器配置不正确导致的。然后,Vue应用会加载并解析URL中的哈希部分,根据路由配置来渲染正确的页面。然而,由于在history模式下,这个路由并不对应一个实际的文件路径,服务器会返回404错误。这个文件是Vue应用的入口文件,它会加载Vue Router,并根据路由配置来渲染正确的页面。在哈希模式下刷新页面时,浏览器会发送一个请求到服务器,但服务器会忽略URL中的哈希部分,继续返回。

ppppsg的博客 2366

RK356X linux系统移植RTL8723BU模块遇到的坑

RK356X linux系统移植RTL8723BU模块遇到的坑

目前从事linux驱动开发,多交流多学习吧 954

解决pd.read_json报错ValueError: Trailing data问题

首先,我们使用open函数打开JSON文件,然后使用json.load函数将JSON文件数据解码为Python对象。在使用Python进行数据处理中,我们经常需要将JSON格式的数据读入到DataFrame中进行处理。而使用pandas库的read_json函数,就可以方便地将JSON数据读入到DataFrame中。但是有时候在读取JSON数据时,会遇到一个非常常见的错误:ValueError: Trailing data。这个错误的解决方案并不难,只需要在read_json中添加一个参数即可。

学习使你进步。 2234

vue项目部署后,二级路由刷新业务报404

1、现象 我是前后端分离开发,前端采用的是vue+Element+axios;用的vue-cli脚手架创建的项目架构。 在开发环境上已经可以正常运行; 采用npm run build 进行运行打包,生成dist文件,使用nginx反向代理服务器进行部署(为了解决跨域问题); 部署后,程序运行正常,例如我访问http://localhost:8080/home 是可以正常访问的 当我从左侧菜单通过vue router进行跳转后,浏览器地址栏的地址变成立我指定的路由地址:例如http://localh

白不懂黑的静的专栏 1569

NSX-T 4.1部署搭建

NSX-T4.1 部署搭建

weixin_58250887的博客 564

vue项目部署到服务器上,使用history路由模式引起二级路由页面丢失的问题解决方法

路由配置 第一次可以出现,再划线就丢失 1.首先如果想要在前端使用hisroty模式的时候需要后端的配置 后盾配置一般固定 下面是我们后端的配置,仅供参考 其中有关history刷新丢失的问题,在于划线的try file 再看前端设置 1.切换路由模式,这个省略 2.需要在vue.config.js中配置publicPath 如图所示 如果想要在开发和生产的时候都用history模式就按照上面的判断环境变量设置 这里注意 在开发的时候,如果你的项目没有做特殊的处理那么想要使用history就的设.

weixin_49210760的博客 3951

AUTOSAR进阶图解==>AUTOSAR_SWS_ADCDriver

本文深入解析了AUTOSAR ADC Driver的架构设计和技术实现。主要内容包括:1)ADC Driver在AUTOSAR分层架构中的定位及核心功能;2)详细的模块架构设计,涵盖初始化管理、组转换管理、优先级处理等核心子组件;3)全面的配置模型说明,包括主配置类、通用配置、通道配置等关键数据结构;4)状态机机制和操作序列分析。通过分层设计和标准化接口,ADC Driver实现了硬件抽象和软件解耦,提供了良好的可移植性和可维护性。

一名留德华的,康德的信徒的,专注于汽车电子领域的博客 786

AI快速变现之路,AI视频创作

初期投入$3000(工具订阅+样片制作),重点攻克跨境电商和本地生活服务市场。关注2025年AIGC视频工具的API降价趋势(如Pika企业版折扣可达50%),建议与云服务商签订长期合作协议。

qq_29896351的博客 1981

vue history模式 二级路由报错 Uncaught SyntaxError: Unexpected token ‘<‘

vue history模式 二级路由报错 Uncaught SyntaxError: Unexpected token ‘<‘

ysj_121的博客 1030

交通规划仿真软件:TransCAD_(7).公交系统规划与分析

通过TransCAD进行公交系统规划与分析,可以有效地评估公交网络的性能,优化线路设计,提高服务质量。数据准备、模型建立、仿真运行和结果分析是公交系统规划与分析的关键步骤。在实际应用中,规划者和分析师可以根据仿真结果提出具体的优化建议,不断完善公交系统的运行效率和乘客体验。

kkchenjj的博客 955

解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页

解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析 前言 总所周知,Vue路由有两种模式,默认hash模式,这种模式下url上会带"#",因此很多公司开发都不使用hash模式而选用另一种history模式,因为history模式下的url不会带上"#"。不带"#"既是history模式的优势,同时让它带来了一些烦人的问题,比如打包部署页面刷新为空白页,使用嵌套路由刷新为空白页的问题。今天我就分享下我解决嵌套路由刷新的问题。 问题分析 以下是我学习/测试时写的二级路由 当我第

weixin_42644340的博客 1万+

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

关于vue页面 刷新后变为空白页的问题

描述: 在现做项目中,由于公司需要求vue-router模式需要更改为 history模式,发现二级路由刷新直接白屏 打开控制台发现报错 经排查发现: history模式时,以/开头的嵌套路径会被当做根据经 故: 更改vue.confige.js baseUrl: '/', 而在hash模式时,项目的根目录是不变的应为 baseUrl: './', ...

weixin_43311271的博客 8233

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

vue 打包后 部署nginx 二级路由 刷新页面,js 报错导致页面空白

vue 的history 模式是很有必要的,可以删掉路径中的# 号,尤其是做微信开发,微信那边会自动把#给除掉。所以一般都设置成history的模式。但设置成history 的模式,会导致很多问题。 最近我就碰到一个这样的问题:如题目 。 仔细看上图出错的路径,这个路径刷新会在当前路径下找 js,很明显这个二级路由的路径下是没有的 static的,所以报错。 再看下我的打包配置: ...

一个在全能之路上越走越远的男人。 2661

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

VUE二级以上路由刷新页面空白Uncaught SyntaxError: Unexpected token‘<‘

为了可以只打包一次 动态设置请求接口的ip 于是在public目录下创建了一个ip配置js文件。2.在vue.config.js中将publicPath设置为'/'功能实现了 结果在运行的时候遇到二级路由以上的页面一刷新就会白屏。1.在index.html中将文件引入路径用这种写法。版本:@vue/cli 5.0.8。再次重启项目 搞定。

z7568527的博客 1315

vue 打包部署nginx,刷新页面空白或404,js报错

今天老板心血来潮,准备部署一版连雏形还没有的项目给甲方爸爸看看,遂停下手中的活,切换生产环境,所有代码缕一缕,尽量做到页面好(bu)看(diu)些(ren),打包交给运维部署。 然后就在测试过程中,发现两个问题,一级页刷新会报404,二级页刷新js报错页面空白。 由于这次和公司一个老前端合作开发,趋于压力,自己之前搭的一套vue框架不能用了,老前端大哥必须自己架构(没有实际vue开发经验),遂...

wozhenhaokan的博客 3775

vue刷新404

1. 问题描述 利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx。部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象! 2. 问题原因: 刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径。 3. 解决方法: 在nginx配置里添加vue-route的...

weixin_44092113的博客 758

vue使用history模式及相关问题处路由

vue使用history模式及相关问题处路由 路由使用history模式 vue 默认使用的是hash模式,在这种模式下,所有的路由地址都会在端口号后加入一个#号。 使用这种模式: 一是url中带有#不是很美观 二是在某些特殊场景下无法达到需求 这时可以开启vue的history模式,可以消除这个#号 根据官方文档,秩序要在新建router时如下配置即可开启history模式 const router = new Router({mode: 'history', routes: routes}); 在本地

qq_42009966的博客 2905

vue-cli项目刷新报错Unexpected token,直接访问二级路由报错Unexpected token

vue/cli项目刷新报错Unexpected token '<',直接访问二级路由报错Unexpected token '<',什么都报错Unexpected token '<',改vue.config.js配置的publicPath解决

HooRay_ 2390

vue hash模式转为history模式(二级路由)

1. 2. 3.后台修改 vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那...

weixin_30469895的博客 561

vue mode: history 链接刷新报错_如何为VUE安装路由?

vue项目在初始化时可以自主安装路由,如果当时没有安装的话,就需要在初始化之后进行配置,本文将讲解如何配置vue路由。首先创建一个项目,路由安装选择no。然后用pycharm或者其他IDE工具打开这个项目,打开项目后不要急于运行,我们先配置一下项目运行的快捷方式。我们进行配置之后,就可以使用IED来运行项目。下一步我们要删除APP.vue中的原有样式。红框内的删除然后开始安装路由。npm i v...

weixin_39829073的博客 116

06. vue history模式刷新后页面白屏、401、404的问题

vue项目history模式刷新后页面空白的问题

qq_29517595的博客 7326

Vue中Export和Export default区别、dependency was not found@XXX.js in ./src/main.js及Unexpected token ‘<‘问题

ES6主要是为了解决ES5的先天不足,比如JavaScript里并没有类的概念,ECMA是国际化标准组织(European computer manufactures association,欧洲计算机制造联合会),1996年11月JavaScript的创造者网景公司将JS提交给希望这种语言能够成为国际标准,随后ECMA发布了规定浏览器脚本语言的标准,即ECMAScript。而export default命令对外输出的变量名是任意的,这时import命令后面,不使用大括号。export可以使用多次。

本博客记录了从2014年以来在工作学习中遇到的技术问题、解决方法以及部分个人人生经历、经验等内容。 2431

VueJS之vue-router、VUE的内置API

Vue的路由库 vue-router、Vue的内置API

nangongwenxuan的博客 229
上一篇: Element-ui input输入框限制输入数字后,当输入非数字后v-model失效
下一篇: component动态引入
前端小li
博客等级 码龄7年 14粉丝 50原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值