vue3 动态路由-刷新页面或者首页redirect进入home页面不出来，提示404无法加载页面的解决办法

最新推荐文章于 2025-10-09 18:02:36 发布
原创 最新推荐文章于 2025-10-09 18:02:36 发布 · 2.8k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

在Vue3应用中，当使用vue-router4进行动态路由配置后，页面刷新可能会导致找不到页面而显示空白。原因是vue-router4在添加路由后不会自动触发新的导航。为解决此问题，需要手动调用router.push或router.replace来加载页面。
问题

vue刷新页面或者首页通过redirect进入home页面，页面都是找不到不显示。
“vue”: “^3.2.47”,
“vue-router”: “^4.1.6”
找了好久发现是因为vue-router4 addRouter后不会触发新的导航，必须自己手动加载一遍。
router.push(to) or router.replace(to) 都可以。
在这里插入图片描述

参考

异步路由/动态路由配置后，页面刷新出现空白页或404的解决办法
vue-router4动态路由刷新404/白屏的解决

vue-router4.0动态路由失效问题

30岁学编程
关注
vue3 - vueRouter4 路由导致警告报错 [Vue Router warn] No match found for location with path “x“（vue3+router4）
高级前端工程师
05-08 5206
vue3，router4，路由，报错，警告，vue-router4路由，vue3路由出现警告，vue-roter4实现动态加载路由，权限动态设置路由，动态路由，刷新页面报错，跳转页面警告，VueRouter4， [Vue Router warn] No match found for location with path，详解vue-router中matcher，详细解决方案，依旧无法解决一直报错，解决Vue3.0 页面刷新，vue3 addRoute 动态路由 页面刷新后 路由失效，addRoute，浏览
vue3动态路由+页面加载进度条
echo_Ae的博客
07-08 1711
这个月使用vue3来架构公司后端项目，刚好要弄动态路由，我这里就抛砖引玉一下ruoter - config.ts router - index.ts main.ts 总结 其实也没啥好讲的，也就是 通过后端传递过来的数据，然后在进行渲染，注意 addRoute 这个方法使用即可需要配合 vue-devtools 谷歌扩展 才能看到路由是否添加完成...
vue3 多级动态路由
Cupid
08-05 2908
vue3 多级动态路由
vue3 动态路由及使用动态路由后刷新界面出现空白页或者404
AKindofo的博客
03-11 6809
vue3 动态路由刷新404或者空白
Vue3项目Nginx部署刷新404问题解决方法
最新发布
BillKu的博客
10-09 554
Vue项目部署后刷新404，通常通过正确配置Nginx，让无法找到资源的请求回退到index.html即可解决。关键是根据你的项目是部署在根目录还是子目录，选择合适的Nginx配置写法，并确保Vue项目的路由模式和公共路径设置与之匹配。
解决vue3，动态添加路由，刷新页面出现白屏或者404
weixin_65363325的博客
11-29 5305
在做毕设的时候，在权限路由得到时候，我问通过router**.**addRoute(item)的方式，在路由守卫动态添加路由刚开始没什么问题，页面的都能正常显示，网络请求也能发送，后来出现了刷新页面，跳转到404解决方法提取出404代码片段追加到处理好的权限列表的末尾我项目采用的vue-router是4.3.3版本。
vue3项目部署后，刷新页面或直接进入某个路由地址时报错404
Lilia_00的博客
06-09 2055
通过正确配置服务器，将所有路由请求都指向 index.html，可以确保 Vue Router 能够处理客户端的路由逻辑，从而避免在刷新页面或直接访问某个路由地址时出现 404 错误。选择具体的配置方法取决于你的服务器环境。
vue3项目一刷新就404(亲测有效)
weixin_73060959的博客
09-17 3763
在 Vue 项目中遇到一刷新页面就 404 的问题，通常是因为你的前端路由（如 Vue Router）是客户端路由，依赖于 JavaScript 来管理页面之间的跳转，而不是传统的服务器端路由。这意味着，当你直接访问一个通过 Vue Router 创建的 URL（比如/about）时，如果服务器没有正确地配置来处理这种“单页面应用”（SPA）的路由，那么服务器可能会返回 404 错误，因为它不知道如何在不执行任何 JavaScript 的情况下提供这个页面的内容。
vue3动态路由+页面刷新丢失路由+再次加载路由
m0_66879773的博客
03-14 7698
注：这里会衍生出一个问题，第一次登录的时候，路由信息没加进去，会跳404，所以这里需要做一个判断，判断路由to.matched这个去哪里的路由信息数组有没有数据，没有就再次添加动态路由信息，还有这块需要添加一个全局标识isAddAgain是否需要重新加载路由。动态路由添加后，每次刷新页面空白，这是因为刷新后路由守卫没再次走一遍，这里就需要在App.vue里面做判断，重新添加路由信息并跳转刷新前路由。目前路由只有静态的页面，我们需要做动态路由，需要在路由守卫router.beforeEach中添加。
vue3动态路由刷新后空白或者404
热门推荐
梧桐凰的博客
06-16 1万+
实测在vue3使用 "ant-design-vue": "^3.2.5",编写动态路由刷新后会空白或者404的解决方法，代码没有最骚只有更骚 读取后端菜单文件进行处理下 主要的来了，可以main或者router\index编写（我是在router\index编写的） 排错过程 期望 码友们有啥更简单的方式实现前端动态路由刷新后能正常显示刷新前页面欢迎评论分享..................
vue3+vite+vue-router4.x实现动态添加路由
listener_life的博客
05-15 6271
根据菜单信息，动态添加路由，并解决页面刷新，路由消失的问题。
Vue3 动态添加路由刷新后出现404解决方案
weixin_43169949的博客
06-05 844
vue3 动态添加路由，刷新页面后出现404的完美解决方案
vue3+ts+history路由模式项目打包部署后刷新显示页面404
qq_57483942的博客
05-08 2015
最近本博主的做了一个医疗的前端开发项目，已经完工了，下面是对部署过程的总结和项目打包部署后刷新显示页面404问题的解决方案。
关于Vue3刷新页面报错404的解决方法
Yang_Ming_Lei的博客
04-26 4342
这时候怎么刷新页面都没有用，只能重新输入地址，一想到每次代码发生改变我都要输入一遍地址，那心情都不好了。在网上看了许多方法都不行，初步判断应该是我的router路由的问题。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问。对了别忘了createWebHashHistory也要引入。当我们去使用这种历史模式时，URL 会看起来很 "正常"，例如。最近正在写VUE3项目时，遇到了一个问题，页面一刷新就出错。也没有发现不对劲的地方。，就会得到一个 404 错误。
Vue路由刷新时出现404问题的解决方案
ByteWhisper的博客
08-16 8036
这样，当在浏览器中刷新页面时，服务器会返回index.html，并由Vue Router来处理相应的路由逻辑。具体做法是，在路由跳转时使用history.pushState来修改URL，使其对应到正确的路由路径。然而，当用户手动刷新页面或直接输入某个路由地址时，由于服务器并没有为该路由提供相应的资源，就会导致404错误。根据具体情况选择适合的解决方案，可以有效地解决路由刷新时的404问题，并提升用户体验。当我们将项目部署到服务器的子目录时，配置正确的基本路径可以避免路由刷新时出现404问题。
踩坑记录（vue3路由跳转，路径改变了但是页面还是空白）
m0_62956518的博客
07-15 505
部分原因：在template标签内部写了注释，猜测原因，template标签内部只能有一个一级标签，但是加了注释之后会将注释也识别为标签，所以跳转成功但是页面还是显示空白的，该原因在控制台不会报错。
Vue3动态路由页面刷新找不到路由空白页面
qq_48256948的博客
01-02 4449
1.新年的第一天，作为一个刚用VUE3的菜鸟程序员遇到了一个获取用户权限动态路由的问题，如果不跳转刷新页面路由都能正常使用，但是一刷新页面通过 router.addRoute()添加的路由就会缺失，并且报路由找到的警告。 2.程序员快速解决bug的方法就是找度娘，但是这次度娘好像不给力了，我看到大多数大佬说的就是添加next({...to,replace: true})，我这里也是直接CV大法看问题解决了吗，结果发现还是不行，只要在动态路由上刷新页面就会变成空白页 3.所以我们这采用常规解决问题的办法
vite vue3 vue-router 动态加载菜单，解决浏览器刷新后界面空白问题
dugucike的专栏
04-19 2589
app.use(store) //再加载store,vuex中的store刷新后清空，否则把菜单放store里面也可以，如果使用vuex持久化插件，router和store的加载顺序得改过来。//进入路由守卫生再加载一次，因为路由间的转向不整体刷新网页，不执行上面的全新加载函数，比如，登陆前，本地前没有存放菜单数据，登陆后还未执行菜单数据拉取，这时候菜单可能为空。//加载菜单,验证是否登陆，登陆则发送加载菜单请求，否则不发送。//如刷新，重新从localstorage加载菜单。//从本地菜单数据加载菜单。
Vue3：刷新页面报错404的解决方法
smiledawen的博客
11-09 1729
Vue3：刷新页面报错404的解决方法 - 掘金不同的历史模式 | Vue Router
vue2 动态路由，页面刷新组件消失菜单还在
02-14
### Vue2 动态路由页面刷新后组件消失但菜单保留的解决方案 对于Vue2项目中遇到的动态路由设置下，当浏览器刷新时组件消失而仅留下菜单的问题，可以采取如下措施来解决： #### 1. 存储并恢复路由状态 为了确保在页面刷新之后仍然能够保持原有的导航结构以及对应的视图展示，可以在本地存储（如`localStorage`或`sessionStorage`）中保存当前用户的权限信息及其关联的路径配置。每次启动应用时先尝试读取这些缓存的数据，并基于此重建完整的路由表。 ```javascript // 将动态加载得到的路由规则持久化至 sessionStorage 中 const saveRoutesToSession = (routes) => { sessionStorage.setItem('dynamic_routes', JSON.stringify(routes)); }; // 启动时从 sessionStorage 获取之前保存下来的路由定义 function loadSavedRoutes() { const savedRoutesStr = sessionStorage.getItem('dynamic_routes'); let routes; try { routes = JSON.parse(savedRoutesStr); } catch (_) {} return routes || []; } ``` #### 2. 初始化阶段同步路由 在应用程序初始化期间，应该主动向服务器请求最新的访问控制列表ACL(Access Control List)，并将获得的结果转换成适合Vue Router使用的格式。接着调用`router.addRoutes()`方法把新的条目加入现有的静态路由集合里[^1]。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; import store from './store'; let router; async function initDynamicRoutes() { // 假设这里会返回一个 Promise 对象，其中包含了来自 API 的响应数据 const aclResponse = await fetch('/api/get_acl'); if (!aclResponse.ok) throw new Error(`Failed to get ACL: ${await aclResponse.text()}`); const dynamicRouteConfigurations = await aclResponse.json(); // 添加自定义逻辑处理以适应具体业务需求... } initDynamicRoutes().then(() => { router = createRouter({ history: createWebHistory(), routes: [ ...staticRoutes, ...(loadSavedRoutes()) ] }); app.use(router).mount('#app'); }); ``` #### 3. 处理未匹配到任何已知路径的情况 如果用户直接输入URL地址栏里的链接或者强制刷新了某个子页面，则可能出现找不到对应资源的情形。此时可以通过监听全局错误事件的方式捕获此类异常状况，并重定向回首页或者其他默认位置；也可以考虑预先注册一条通配符模式下的兜底规则用于应对未知情况的发生[^2]。 ```javascript router.beforeEach((to, from, next) => { // 如果发现不存在于现有记录内的 URL 请求， // 则重新拉取最新版的 ACL 并更新内部状态机。 if (!hasMatchingPath(to.path)) { initDynamicRoutes() .catch(err => console.error(err)) .finally(() => next({ name: 'home' })); return; } next(); }); // 或者是在 route 配置数组最后面追加一个 * 号作为占位符 { path: '*', redirect: '/not-found' } ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值