动态路由添加404页面后 一刷新就跳404

最新推荐文章于 2024-08-16 18:06:27 发布
最新推荐文章于 2024-08-16 18:06:27 发布
阅读量278 收藏 8
点赞数 4
分类专栏： spring-boot Vue JavaScript 文章标签： spring boot javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zwwxd666/article/details/141106591
版权
Vue 同时被 3 个专栏收录
17 篇文章 0 订阅
订阅专栏
JavaScript
17 篇文章 0 订阅
订阅专栏
spring-boot
10 篇文章 0 订阅
订阅专栏

前言

静态路由表constantRoutes 添加了个404页面

然后一刷新，由于getRouter获取路由及其router.addRoutes非常乌龟行为，还带一点异步的赶脚

导致addRoutes 没搞完，此时动态路由表还没你要跳转路径的路由

就被迫只能跳到path:* redirect=>到path:/404页面了

说人话就是，路由等不及了，你后端给我的路由表太慢我就将就着跳到*任意地址的路由去

解决方法

给他变成一个push方法在add前

image-20240811154026289

Zww0891
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 解决addRoutes动态添加路由后刷新失效问题(跳转“404”页面)
JC.Lin的博客
12-21 2万+
这篇文章主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 前言 某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。 应用场景：用户a登录进系统，用户挑选店铺后跳转到店铺详情首页，进入到动态...
Vue实现远程获取路由与页面刷新导致404错误的解决
10-17
然而，这种模式下会面临一些挑战，比如动态路由和页面刷新导致的404错误。本文将详细讲解如何在Vue中实现远程获取路由以及解决页面刷新后出现404错误的问题。 一、项目背景 在前后端分离的项目中，通常由后端负责...
vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法
laosao_66的博客
04-22 2529
在使用的过程中，加入权限模块后，刷新后权限控制的页面就默认跳转到404页面了，原因是权限控制的路由模块是动态添加进去的，而我的404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，改一下，把404监听路由注释掉需要手动在动态路由加载后，再把通配路由加上去，所以有了解决方法二。这个bug的具体情况是：设置了动态路由之后，不同的用户登录之后显示了不同的侧边栏，在侧边栏点击菜单，渲染对应路由页面没有任何问题，但是在。（这种情况只出现在动态路由上，静态路由刷新没问题）。
vue 动态路由 addRoutes 刷新页面404（空白）
huangruifeng的博客
06-03 1万+
vue开发页面，通过addRoutes实现动态路由的添加，但是在进入对应页面的时候刷新时跳转到404或空白，最后发现只需把空白页面跳转直接加载到动态路由后面即可解决，代码如下： 1：静态路由中注释掉{ path: '*', redirect: '/404', hidden: true }（如果有） 2：在动态路由中push上面注释掉的路由，asyncRoutes.push({ p...
vue3动态路由刷新后空白或者404
热门推荐
梧桐凰的博客
06-16 1万+
实测在vue3使用 "ant-design-vue": "^3.2.5",编写动态路由刷新后会空白或者404的解决方法，代码没有最骚只有更骚 读取后端菜单文件进行处理下 主要的来了，可以main或者router\index编写（我是在router\index编写的） 排错过程 期望 码友们有啥更简单的方式实现前端动态路由刷新后能正常显示刷新前页面欢迎评论分享..................
vue 使用addRoutes动态添加路由 刷新页面跳转404路由的问题
多毛大叔爱萝莉的博客
03-07 1万+
在做vue项目时需要使用后端给的路由权限，处理路由动态添加到路由上，几经查找在 vue-Router中有个router.addRoutes 的方法。 官方使用方法及说明 点我 router.addRoutes 函数签名： router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的...
vue添加动态路由，刷新404问题
在工作中修行，达到禅定~~
10-26 760
在刷新的时候，会清除动态路由，这个时候尚未加载路由，然后基础路由上*匹配的是404页面，此时就会跳转到404页面。解决办法 : 在动态路由后面添加通配符路由规则。
vue 动态路由刷新失效及404页面处理
Gao_wbe的博客
02-12 6889
vue动态路由时会遇到一些坑，这里总结一下，并提供解决思路。
vue动态路由添加后刷新显示空白页或404
nniicchheerr的博客
05-09 8774
刷新显示空白页面 原因：页面刷新会导致vuex数据丢失，所以无法动态添加路由 1、在store user.js state中添加字段isAddRoutes:false，用来判断是否已经添加完动态路由的添加。作用：每次页面刷新时都先判断一下动态路由是否添加，若没有，重新添加动态路由。 2、在mutations中完成动态路由添加后，给字段isAddRoutes赋值为true，表明已添加动态路由 //动态添加路由 SET_RESULTASYNCROUTES(state, resultAsyncR.
动态添加路由 addRoute添加路由刷新404
weixin_55869175的博客
05-13 6410
动态添加路由 addRoute添加路由刷新404
vue3后台动态添加路由刷新出现404页面
m0_56857467的博客
09-02 1413
vue3添加动态路由刷新页面后出现404
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
用户在新跳转的页面，刷新时利用 beforeEach 进行拦截判断，如果发现之前有保存路由，并且判断新页面只是刷新事件，再将之前保存的路由添加进来。 代码实现 首先，在 router/index.js 里声明一个数组，里边是一些...
vue 项目中当访问路由不存在的时候默认访问404页面操作
01-19
在最后添加一个path: * ，优先级从上到下查找路由，都没有的时候全部指向 404页面 ，代码如下： const baseRoute = [ { path: '/login', name: 'login', component: Login }, {path: '/', redirect: '/index', ...
vue下使用nginx刷新页面404的问题解决
10-16
Vue Router在HTML5 History模式下会将所有的路由路径指向同一个入口文件，通常是index.html，而nginx默认情况下没有配置对这种路由的处理方式，因此当用户直接访问某个路由路径（如***/user）后进行页面刷新时，...
基于Spring Boot的可盈保险合同管理系统的设计与实现
a253399414的博客
08-14 609
【代码】springboot基于Spring Boot的可盈保险合同管理系统的设计与实现
基于Spring Boot的库存管理系统
最新发布
a253399414的博客
08-16 227
【代码】springboot基于Spring Boot的库存管理系统
人格障碍诊断系统
a253399414的博客
08-14 1205
【代码】springboot人格障碍诊断系统
Nacos配置内容加密实现
东皋长歌的专栏
08-13 426
因为项目中安全检查的要求，需要将nacos配置的内容进行加密，所以需要实现将配置内容加密处理，这里引入nacos-aes-encryption-plugin插件来完成这一需求。3.2 将项目的yml文件中的"spring.cloud.nacos.config.prefix"改为"cipher-aes-"开头，例：cipher-aes-user。-U参数表示强制更新依赖。进入Nacos控制台，配置内容正常处理，配置名以"cipher-aes-"开头，例：cipher-aes-user。
JAVA--比较器
qq_56438516的博客
08-14 807
Java中的比较器（Comparator）是一个非常强大的特性，它允许我们定义对象比较的规则。在Java中，Comparator接口位于java.util包中，主要用于对象的比较。以下是对Java中比较器的详细介绍。
vue动态路由刷新页面404
07-27
出现Vue动态路由刷新页面404的问题，可能是因为在部署时没有正确配置服务器的路由规则。以下是一些可能的解决方法： 1. 确保服务器配置了正确的重定向规则。如果使用的是Nginx，可以在配置文件中添加以下内容： ``` location / { try_files $uri $uri/ /index.html; } ``` 这将把所有请求都重定向到index.html，确保Vue应用能够处理动态路由。 2. 如果你在使用Vue Router时使用了history模式（即没有使用哈希模式），请确保服务器已经配置了对应的重定向规则。在Nginx中，你可以添加以下配置： ``` location / { try_files $uri $uri/ /index.html; rewrite ^.*$ /index.html last; } ``` 这将重定向所有非静态资源请求到index.html。 3. 如果你使用的是Apache服务器，可以在.htaccess文件中添加以下规则： ``` <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` 这将确保所有非现有文件和目录的请求都被重定向到index.html。 请注意，以上方法适用于大部分情况，但具体解决方法可能因服务器环境而异。如果问题仍然存在，建议查阅相关服务器文档或咨询服务器管理员。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值