vue-router设置404失败

vue3 多级动态路由 阅读详情

做一个多页面项目,一般会加一个404页面。

问题

router中设置匹配404规则,但是没有生效

new Router({
	mode: 'history',
	routes: [{
		path: '/',
		name: 'layout',
		component: Layout,
		redirect: '/home',
		children: [{
				path: '/home',
				component: Home,
				name: 'home'
			}]
    }]
  }, {
		path: '*',
		component: 404,
	}]
});
this.$router.push({
	name: 'number111',
});

分析

没有效果可能没设置成这样

{
	path: '*',
	name: '*',
	component: 404,
}

尝试之后,发现没有解决,那应该是使用路由守卫了

Routes.beforeEach((to, from, next) => {
  if (to.matched.length !== 0) {
    next()
  } else {
    next({ path: '/404' })
  }
});

建议

  • 不使用路由守卫,建议路由跳转不使用name
  • 使用路由守卫处理404
SPA应用刷新404?5分钟搞定Nginx和Vue Router配置 本文详细解析了SPA应用刷新时出现404错误的根本原因,并提供了Nginx和Vue Router的完整配置方案。通过正确配置前端路由和后端服务器,开发者可以快速解决单页应用中的路由问题,确保应用在各种访问场景下都能正常工作。 阅读详情

相关推荐

Vue3项目部署到Caddy服务器后刷新404?手把手教你配置路由重定向

本文详细解析了Vue3项目部署到Caddy服务器后刷新出现404问题的原因,并提供了完整的路由重定向配置方案。通过Caddyfile的`try_files`指令和Vue Router的history模式配置,确保单页应用在刷新时正确返回index.html。文章还包含API代理、Vite基础路径设置及生产环境优化等实用技巧,帮助开发者高效解决SPA部署难题。

weixin_42525005的博客 190

vue-router 使用name跳转时,404失效的问题

使用name跳转的时候,如果路由表中没有找到对应的name的时候,并不会跳转到404页面,例如下面的代码: gotoUserCenter() { this.$router.push({ name: 'userCenterPage' }) }, 当name:“userCenterPage”不存在于路由表中时就会跳转到一个空白页面,而并不会跳转到404页面,其实是因为vue-router没有对这种情况做什么处理: 当前网上的应对方案是1. 不使用name来跳转 2. 在守

huangssssx的专栏 4977

Vue项目部署后刷新404问题:原理、解决方案与最佳实践

单页应用(SPA)是现代前端开发的主流架构,其核心在于通过前端路由实现页面内容的动态切换,而无需每次跳转都向服务器请求完整的HTML文档。这种机制依赖于浏览器历史API或哈希模式,在客户端管理路由状态。然而,当SPA部署到静态资源服务器时,服务器默认会根据请求的URL路径寻找对应的物理文件,对于前端路由生成的路径(如/about),服务器因找不到对应文件而返回404错误。这一问题的技术价值在于理解前后端职责分离与协作模式,是前端工程化部署的关键环节。其应用场景广泛,涉及Nginx、Apache、Tomcat

weixin_29010003的博客 309

力软vue前端开发:使用params跳转传参404问题解决

力软vue params跳转传参404问题解决

ougexingfuba的博客 1070

若依ruoyi Vue前端Nginx服务器部署实战与疑难解析

本文详细介绍了若依(ruoyi) Vue前端在Nginx服务器上的部署实战与疑难解析,包括路由配置、静态资源路径处理等核心要点。通过修改vue.config.js、调整路由基础路径等关键步骤,解决页面刷新404、模块加载失败等常见问题,并提供Nginx配置模板与优化技巧,帮助开发者高效完成企业级应用部署。

weixin_42525551的博客 394

PLC编程入门基础知识

PLC即为可编程逻辑控制器,实质是一种专用于工业控制的计算机,其硬件结构基本上与微型计算机相同。

SANRENYIXING的博客 2万+

vue $router.push 传参时 404错误

用vue $router.push 传参时,一直404错误。 原因:这个路由方法写在了调取后台接口成功响应方法then()的外边了,跟在里边就好了: 改正:

yssa1125001的博客 6687

统计信号处理基础 习题解答1-1

1-1:在雷达习题中,双程延时时间的估计量具有PDF τ0~Nτ0,στ02,其中τ0是真值。假如要估计距离请提出一种估计量R,并求它的PDF。然后,确定标准偏差στ0,使得距离估计值的99%在真值的100m以内,对电磁波传播速度取c=3×108m/s。 解答: 问题1: 由于电磁波传播速度c,信号可观察的双程传播延时τ0和双程传播距离τ0满足关系: R=cτ02 因此可采用如下估计量: R=cτ02 问题2: 由于τ0满足正态分布,且: Eτ0=τ0 varτ0=στ02 那么: E

weixin_43270276的博客 2805

路由跳转失败——不想显示404页面

路由跳转失败,一般浏览器会自动跳转404页面(或者我们定义的404页面),但有项目需求,部分路由跳转失败,要求跳到指定的页面,这时我们就需要 路由本身自带的回调方法了 that.$router.push({路由地址和携带参数},成功回调,失败回调) this.$router.push({ path: `/route/${POLPOD}/${paramDate}` },()=>{ console.log('我成功了') },()=>{ console.log('我失败了') });

who_become_gods的博客 907

ffmpeg(一) ffmpeg+QT开发环境搭建

(exe 程序编译的时候只需要包含 xxx.dll.a 静态导入库,运行的时候才需要 xxx.dll 文件)这个 .pro 文件的配置,是指导程序编译的时候,可以找到对应的动态库。值得一提的是,在Windows中,静态链接库(Static Link Library)的扩展名也是.lib、.dll.a。其实只要你掌握了FFmpeg,也可以很快上手其他音视频开发库,因为底层原理都是一样的,你最终操作的都是一样的数据,比如MP3、MP4文件。导入库:不包含函数的具体实现代码(函数的具体实现代码存储在dll中)

小道士写程序 8202

智能车图像处理0-图像处理整体框架思路

1.总体框架如上所示,具体代码请查看后续文章。2.因为参与竞赛时间是大二,所以在编程中有许多不规范的地方(如变量的命名),大家见谅。3.原创文章,请勿侵权=-=

taiyuezyh的博客 1万+

解决Nginx部署Vue项目刷新页面404问题

摘要: Vue等SPA应用部署在Nginx时,刷新子路由会出现404错误,因为Nginx直接查找对应文件路径而非返回index.html。解决方案包括: 修改Nginx配置(推荐):添加try_files $uri $uri/ /index.html,将所有请求重定向到前端路由; 启用Vue Router的history模式; 改用hash模式(URL含#,不推荐)。 需确保静态资源路径正确,配置后执行nginx -t验证并重载服务。若项目非根路径部署,需同步调整Vue Router的base选项。

lsk0909的博客 2817

2024顶级提示工程工具:提升效率的12个神器

LlamaIndex虽然本身不是直接的提示词编辑工具,但其整个设计都围绕着如何有效地将外部知识融入LLM的提示词。它提供了结构化的方式来管理“上下文窗口”——即哪些私有数据应该被包含在提示词中。通过优化索引结构和检索策略,可以确保提示词中包含最相关、最高质量的上下文信息,从而大幅提升LLM基于私有数据回答问题的准确性和相关性。同时,LlamaIndex允许开发者针对不同的查询类型和数据特点定制提示词模板,这使得提示词的复用和优化更加系统化。

AIGC应用创新大全的博客 1098

Vue项目部署Gitee Pages避坑指南:解决SPA应用404和资源加载问题

本文详细解析了Vue项目部署至Gitee Pages时常见的SPA应用404与资源加载问题。通过分析Gitee Pages的工作原理与SPA特殊性,提供了从项目配置、路由模式选择到构建部署的完整避坑指南,并针对常见问题给出了具体解决方案,确保您的Vue应用能稳定运行。

y7z8a9的博客 766

HyperLynx(三十一)高速串行总线仿真(三)

(5)选择 “File”→ “Open Touchstone”,打开路径 C:\Adv_HL_Tmg\SERDES_Interface\models,选中connector.s4p,单击打开,如图所示。接下来,找出将要分配模型的S参数连接。(12)单击“Assign”按钮,选择模型类型为“Touchstone models”,在库中选择“connector.s4p”,如图所示。(14)单击“OK”按钮,选中“connector.s4p”这一行,单击“Connection Editor”按钮,如图所示。

小幽余生不加糖 3365

动手在 SAP BTP Cloud Foundry 开发和部署 SAP UI5 应用的前置条件 - 订阅 SAP Build Work Zone Standard Version

摘要:本文介绍了SAP BTP Cloud Foundry环境中HTML5应用的概念,区分了web应用、HTML5应用和SAP UI5应用的关系。重点说明了在Cloud Foundry环境部署HTML5应用的方法是通过订阅SAP Build Work Zone standard edition服务,并详细描述了订阅过程中可能遇到的"OIDC trust missing"错误。该错误是由于业务用户认证需要配置SAP Cloud Identity Services的OpenID Connec

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 310

RuoYi-Vue项目部署实战:子路径配置与Nginx刷新404难题攻克

本文详细解析了RuoYi-Vue项目在子路径部署时遇到的Nginx刷新404问题,提供了前端配置调整和Nginx服务器配置的实战解决方案。通过修改vue.config.js、路由配置和登录跳转逻辑,结合Nginx的try_files指令,有效解决了单页应用在子路径下的路由问题,适合需要部署前后端分离项目的开发者参考。

weixin_30480075的博客 384

SMART200如何实现多次调用子程序带定时器功能

1、西门子200PLC的子程序由于很多限制条件,如果希望建立一个可以多次调用的子程序,那么这个子程序里是不能含有定时器指令的,所以我们只能退而求其次了。建议将沿指令(上升沿、下降沿)放在多次调用子程序的外面。 2、可以提供不同的时基,提供不同时间的定时 3、实现秒定时 5、子程序内部: STL代码: 1、时基信号由外部提供、 可以提供不同的时基信号 2、实现循环定时开关 LD #Start:L0....

RXXW_Dor的博客 1万+

Vue踩坑日记: history路由打包后无法加载

在使用Vue框架时避免不了会使用到vue-router工具,Vue-router提供了Hash和History两种路由模式。默认为Hash模式,但此模式下URL中会存在 “#” 缺少美观,并且微信中不允许URL存在“#”。所以很多人会选择History路由模式。 const router = new VueRouter({ mode: 'history', // 设置为history模式 base: process.env.BASE_URL, ... }) 但是History路由模式也不是没有

qq_42221363的博客 4787

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.js 多项目同端口部署实战:上下文路径配置指南

Vue.js多项目同端口部署指南:本文介绍了如何通过上下文路径配置在同一个端口下部署多个Vue项目。关键步骤包括:1)配置Vue Router的base路径和Webpack资源路径;2)正确处理静态资源引用和API请求;3)Nginx/Apache服务器配置实现URL重写。重点解决了404错误、资源加载失败等常见问题,并推荐使用环境变量、相对路径等最佳实践。最终实现主项目(/)和子项目(如/datav/)在同一域名下的共存访问。

TTianYe的博客 1024

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Vue项目多级路径部署终极指南

本文详细介绍了Vue项目在多级路径部署中的完整解决方案。主要内容包括:1. 通过环境变量统一管理路径配置;2. VueRouter的base路径适配;3. vue.config.js中publicPath等关键配置;4. 静态资源引用规范;5. 服务器(Nginx)部署配置;6. Docker容器化部署方案;7. 常见问题解决方法。文章提供了从开发到生产的一整套配置方案,确保项目在不同路径环境下都能正常运行,并给出了最佳实践建议和检查清单。

油墨香^-^的博客 528

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

利用Nginx反向代理实现单域名单端口多Vue项目部署方案

本文详细介绍了如何利用Nginx反向代理在单一域名和端口下部署多个Vue项目。通过配置Vue项目的publicPath和路由base,并结合Nginx的location与alias指令,实现基于路径的精准路由分发。该方案能有效统一访问入口、降低运维成本,并解决SPA应用在非根路径部署时的刷新404等典型问题。

tea88的博客 749

关于Vue2项目打包

对于前端来说,自己看的时候,只需要 mode改为hash模式 中 如果项目上线要history模式,后端那里要去做重定向。打包后,用Live Server插件打开index.html页面,页面空白不显示, 也不行 由于路由中,base属性(应用的基路径)默认为 但此时index文件在,相对于服务器扫描的路径 下解决办法:(最终目的都是将 index文件路径 和 base属性一致) 第一种:将dist文件夹中的文件(index,css,js啥的),拿出来,就可以了 第二种:修改base属性为:,重新打包

qq_53318060的博客 1495

vue项目,url访问不了,用route-link跳过去就可以访问,为什么

router-link 能访问:因为这是前端路由跳转,不请求服务器直接输入URL不能访问:浏览器向服务器请求该路径,服务器没有对应资源解决方案:配置服务器将所有路由指向 index.html,让 Vue Router 处理路由。

zwh1zwh的博客 490
上一篇: Cookie方法封装
下一篇: Type of the default value for 'propsTree' prop must be a function
xiaojinglyd
博客等级 码龄9年 6粉丝 29原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值