vue-router动态路由刷新页面报404问题

最新推荐文章于 2024-08-11 15:42:28 发布
最新推荐文章于 2024-08-11 15:42:28 发布
阅读量3.4k 收藏 7
点赞数 2
分类专栏： HTML前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44786530/article/details/125433629
版权

请注意：404 page must be placed at the end !!!

404页面一定要放在路由的最后面，否则就会引起出错，包括动态添加路由的时候，也要放在最后面。

如果是动态路由，在router下的index.js中定义一个error404路由变量，

 

然后在动态路由处引入：

// 在这里将用户路由添加到动态路由最后之后，404路由就不是最后了，会引起刷新404问题

router.addRoutes([...routes, error404])

 

1024小神
关注
专栏目录
vue-router 4.0 动态路由会跳转到 404 页面的问题
纯爱枫若情的博客
07-10 7506
当然以上的代码只适用于我们文章一开始假设的场景，真实的业务场景中，应该会有更多更复杂的情况，但是万变不离其宗，只要理清了思路，掌握了原理，找到了应对方案，再复杂的场景也能一步步抽丝剥茧，应付起来将会游刃有余。所以，我们就会借用，router 提供的一些列的生命周期函数，来帮助我们确保，当用户信息存在的时候，能自动添加我们的动态路由。一种场景是，当用户未登录，这时候，也没有 vip 这个路由的存在，那么路由匹配不到，会直接被。为了用户体验的友好性，我们不可能让用户每次用我们的页面的时候，都先执行一遍登录。
vue-router上线后刷新报错404,解决方案
易与天行的博客
09-12 2964
参考链接： 链接 官网说明 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 当你的页面上线刷新出现404时，基本上就是这个问题。解决方案： 在nginx配置里添加vue-route的跳转设置（这里首页是index.html，如果是ind
Vue路由history模式踩坑记录：nginx配置解决404问题
weixin_34273481的博客
06-11 1060
问题背景： 　　vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 hist...
动态路由添加404页面后 一刷新就跳404
最新发布
Zwwxd666的博客
08-11 331
静态路由表constantRoutes 添加了个404页面然后一刷新，由于getRouter获取路由及其router.addRoutes非常乌龟行为，还带一点异步的赶脚导致addRoutes 没搞完，此时动态路由表还没你要跳转路径的路由就被迫只能跳到path:* redirect=>到path:/404页面了说人话就是，路由等不及了，你后端给我的路由表太慢我就将就着跳到*任意地址的路由去。
Vue Router 跳转404，路由守卫及配置（登录篇）
Harley567
02-07 8502
Vue Router 跳转404，路由守卫及配置（登录篇）
【权限管理】 ----动态路由刷新页面`404`问题解决
这个Bug怎么解啊？
01-06 1869
【权限管理】 ----动态路由刷新页面`404`问题解决
vue-router addrouters 刷新导致页面空白或404 解决方案
lizhen_software的博客
09-02 6553
vue-router动态路由加载会遇到一些问题，最严重的问题是刷新动态路由页面导致404，网上查了不少资料，都有点问题，解决了一下，附代码及解决思路。 1、使用动态路由时需要一个全局变量，用来控制什么时候加载这个动态路由，我用的是vuex全局状态集管理，用他有个好处就是，刷新时路由信息会丢失，vuex状态也会丢失，所以根据他的状态来判断比较好，设置一个初始值 , 默认false,等动态路由加载完...
vue-router路由参数刷新消失的问题解决方法
01-21
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。 解决...
vue-router重定向不刷新问题的解决
08-27
Vue Router 重定向不刷新问题的解决 在使用 Vue Router 进行路由重定向时，可能会遇到重定向不刷新的...Vue Router 的重定向功能可以解决路由不一致的问题，但是在某些情况下，可能需要额外的处理来确保页面正确刷新。
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
然而，在Vue-Router 3.0版本中，开发者可能会遇到一个常见问题：使用`router.push`进行页面跳转时，URL会改变，但页面内容不会自动更新，除非手动刷新页面。这个问题在GitHub上也有相关的讨论，特别是在3.0.1版本中...
解决VUE-Router 同一页面第二次进入不刷新的问题
10-15
在开发Vue.js应用时，...通过上述方法，我们可以解决Vue-Router中同一页面第二次进入不刷新的问题，并且可以有效处理页面刷新时的参数丢失问题，保证用户的操作体验。希望这些解决方案对你在实际开发过程中有所帮助。
vue3 动态路由及使用动态路由后刷新界面出现空白页或者404
AKindofo的博客
03-11 3658
vue3 动态路由刷新404或者空白
Vue-router-404页面
Liangwan0315的博客
01-16 1190
解决了如果因路径输入错误，从而都跳转到404页面
vue添加动态路由，刷新404问题
在工作中修行，达到禅定~~
10-26 834
在刷新的时候，会清除动态路由，这个时候尚未加载路由，然后基础路由上*匹配的是404页面，此时就会跳转到404页面。解决办法 : 在动态路由后面添加通配符路由规则。
Vue-router 4 动态路由后刷新指向404问题
weixin_44536001的博客
05-30 1381
如果没有设置动态路由可以直接在router 路由表中直接配置，但是有使用动态路由会导致刷新页面直接跳到404。但是我的项目中直接死在了第一步，虽然remove方法执行成功了，通过调用router.getRoutes（）也确认了404的路由已经清除，但是页面还是被导航到了404页面，如果通过修改next中的path跳转更会导致路由跳转无限嵌套。所以推荐判断404路由是否存在，然后再直接通过addRoute在动态路由后添加404路由，这样也不用调用removeRoute 也避免其他意外情况。
vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法
laosao_66的博客
04-22 2974
在使用的过程中，加入权限模块后，刷新后权限控制的页面就默认跳转到404页面了，原因是权限控制的路由模块是动态添加进去的，而我的404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，改一下，把404监听路由注释掉需要手动在动态路由加载后，再把通配路由加上去，所以有了解决方法二。这个bug的具体情况是：设置了动态路由之后，不同的用户登录之后显示了不同的侧边栏，在侧边栏点击菜单，渲染对应路由页面没有任何问题，但是在。（这种情况只出现在动态路由上，静态路由刷新没问题）。
【Vue】Vue路由-404
qq_39921135的博客
06-07 215
path: “*” (任意路径) – 前面都不匹配就命中最后这个。404的路由，虽然配置在任何一个位置都可以，但一般都。当路径找不到匹配时，给个提示页面。
【Vue路由-404】
武帝为此的博客
10-17 875
404页面是指当用户尝试访问不存在的页面时，服务器返回的错误页面。在Vue应用中，可以通过Vue Router来自定义这个页面，以提供更友好和有用的用户体验。
vue 解决addRoutes动态添加路由后刷新失效问题(跳转“404”页面)
热门推荐
JC.Lin的博客
12-21 2万+
这篇文章主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 前言 某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。 应用场景：用户a登录进系统，用户挑选店铺后跳转到店铺详情首页，进入到动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1024小神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值