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

最新推荐文章于 2024-06-05 10:30:24 发布
最新推荐文章于 2024-06-05 10:30:24 发布
阅读量2.3k 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cs_dnpctt/article/details/131706391
版权
问题

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动态路由失效问题

5ab-top
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
[Vue3] 重定向 redirect
Ryan-Yu的博客
03-26 607
效果：访问根路径时自动访问/home路径。
Vue路由跳转了但是页面不跳转[解决办法]
热门推荐
weixin_45912825的博客
06-06 1万+
Vue路由跳转了但是页面不跳转[解决办法]为什么会出现这种情况解决办法 为什么会出现这种情况 最近开始学习Vue的组件化开发，想要进行页面跳转就设置了路由： const routes=[ { path:'/', component:home }, { path: '/login', component:login } ] 但是无论路由怎么跳转页面都只在home组件上. 这是因为路由页面需要显示在router-
Vue3 动态添加路由刷新后出现404解决方案
最新发布
weixin_43169949的博客
06-05 214
vue3 动态添加路由，刷新页面后出现404的完美解决方案
Vue——vue3路由重定向redirect写法
qq_43201350的博客
10-09 5118
Vue——vue3路由重定向redirect写法
vue3 关于动态路由刷新出现空白页最优解
qq_40315210的博客
03-21 5167
递归调用：next({ …to, replace: true });（慎用，如果你的后台管理table是带标签会有问题，没有放对位置会死循环）原因：刷新页面的时候动态路由会刷新掉，然后动态路由会重新加载，解决办法：递归再调用beforEach，或者直接跳回首页。
vue3路由重定向
风中追风
09-07 9718
指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；1.新建项目 并引入vue和vue-router；4.使用redirect 属性设置路由重定向；3.createRouter定义和配置路由；2.使用Vue.use注册路由；
关于Vue3刷新页面报错404的解决方法
Yang_Ming_Lei的博客
04-26 3271
这时候怎么刷新页面都没有用，只能重新输入地址，一想到每次代码发生改变我都要输入一遍地址，那心情都不好了。在网上看了许多方法都不行，初步判断应该是我的router路由的问题。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问。对了别忘了createWebHashHistory也要引入。当我们去使用这种历史模式时，URL 会看起来很 "正常"，例如。最近正在写VUE3项目时，遇到了一个问题，页面一刷新就出错。也没有发现不对劲的地方。，就会得到一个 404 错误。
Vue3：刷新页面报错404的解决方法
smiledawen的博客
11-09 1404
Vue3：刷新页面报错404的解决方法 - 掘金不同的历史模式 | Vue Router
Vue实现远程获取路由与页面刷新导致404错误的解决
10-17
本文将详细讲解如何在Vue中实现远程获取路由以及解决页面刷新后出现404错误的问题。 一、项目背景 在前后端分离的项目中，通常由后端负责用户权限管理，不同的角色可能有不同的访问权限。为了实现这一功能，我们...
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue通过路由实现页面刷新的方法
08-28
Vue 通过路由实现页面刷新的方法 在 Vue 项目中，页面刷新是一个常见的问题， especially when dealing with complex applications. 在本文中，我们将探讨通过路由实现页面刷新的方法，解决购物车页面跳转到详情页...
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
在Vue.js框架中，结合Element UI库，动态加载路由是一种高效的方法来管理复杂的应用程序菜单结构，特别是当涉及到多级菜单时。以下是如何使用这种方式实现三级菜单页面显示的详细步骤和知识点： 首先，动态加载路由...
解决Vue3动态添加路由后刷新白屏的问题
白的夜的博客
07-19 3432
使用router.addRoute()动态添加路由后正常点击没问题，一刷新就白屏。原因：路由守卫放行的时候，动态路由组件还没有渲染完毕。
vue3动态路由刷新后空白或者404
qq_45555960的博客
06-09 3209
在使用beforeEach 进行拦截路由采用动态路由时，页面刚初始化时路由正常跳转但页面刷新后出现空白或者404。通过后端拿到路由数据，遍历路由数据通过router.addRoute一个个的添加，同时将路由数据通过。x缓存起来，当页面刷新时，从缓存里拿出路由数据再重新添加，同时配合路由守卫来跳页面。时动态添加的路由已经被完全加载上去，一般是与添加动态路由时配合使用。刷新页面后动态添加的路由页面空白。逻辑不当的情况下，很容易死循环。
vue动态添加路由后刷新页面白屏问题
weixin_47673864的博客
06-10 3616
页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（） 在
Vue3-32-路由-重定向路由
northcastle的博客
01-02 2009
vue3 中的重定向路由基本使用案例
vue3项目部署到服务器，刚打开没事，一刷新页面就404
pig_ning的博客
01-12 918
vue3项目部署到服务器，刚打开没事，一刷新页面就404
vue3实现动态菜单和动态路由和刷新后白屏处理
bu_xiang_tutou的博客
03-12 6461
项目中，当每一个角色得到的界面不一致的时候，我们就不能使用静态菜单了，而是要从后端得到动态的菜单数据，然后动态的将菜单数据展示在界面上。除了在界面展示，也还要将界面的路由动态添加，在路由动态添加之后，你可能会出现刷新界面，界面变白的情况，页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。这种情况我会在最后给一个处理方法。
Vue3+router路由重定向-别名
qq_52099965的博客
10-23 1015
Vue3+router路由重定向-别名
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。 请注意，以上方法适用于大部分情况，但具体解决方法可能因服务器环境而异。如果问题仍然存在，建议查阅相关服务器文档或咨询服务器管理员。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值