vue-router刷新页面显示404

最新推荐文章于 2024-04-17 16:32:40 发布
最新推荐文章于 2024-04-17 16:32:40 发布
阅读量1.8k 收藏
点赞数
分类专栏： vue2 vue router web前端
web前端 同时被 3 个专栏收录
63 篇文章 0 订阅
订阅专栏
vue2
33 篇文章 1 订阅
订阅专栏
vue router
5 篇文章 0 订阅
订阅专栏
走_开
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 页面跳转404_Vue 项目一些常见问题的解决方案
weixin_39875167的博客
11-20 8148
本文已获得原作者的独家授权，有想转载的朋友们可以在后台联系我申请开白哦！PS：欢迎掘友们像我投稿哦，被采用的文章还可以送你掘金精美周边！有一些问题不限于 Vue，还适应于其他类型的 SPA 项目。1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出...
vue router 刷新404问题
weixin_34270606的博客
01-08 1550
1. 问题描述 单页面应用的vue项目，设置router模式为history。可以跳转但刷新了页面，则显示为404。 vue-router的默认hash模式使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。但是这种hash很丑，也不符合对URL的使用习惯。所以，需要使用另外一个叫history模式来实现UR...
Vue中this.$router.push()失效解决办法
热门推荐
weixin_45912825的博客
06-09 2万+
问题描述 今天学习Vue的时候准备使用this.$router.push()来跳转页面,但是无论如何也跳转不了，也没有报错. 路由如下: { path:'/home', component:home, name:home }, { path: '/login', component:login, name:login } 从login界面跳转到home界面不成功 解决办法 引入rout
vue网页浏览器刷新404问题解决
最新发布
邓邓子的博客
04-17 819
【代码】vue网页浏览器刷新404问题解决。
vue-router 使用 name 跳转时404失败、无效
qq_35430000的博客
11-27 5797
我设置的 404页面如下设置 1、我使用 name 匹配 跳转 一个不存在的路由时，并没有进入404页面 this.$router.push({'name':'xxx'}) 我把404 的 name改为 ‘*’也没有效果，可能是 只匹配 path，而name并没有使用 2、所以没有找到的路由的情况下，使用name跳转，会导致不触发404 所以推荐 路由跳转时，使用path进行跳转...
vue页面跳转报404
weixin_40444253的博客
06-06 826
vue页面跳转报404
vue 使用vue-router部署后刷新404
凝涵的博客
12-09 3145
前端框架一般都会使用router功能，vue的vue-router就是实现路由功能的。 这种功能有个小问题： 当我们在开发时，假设有个路由是/admin，返回的是主页面，然后有个路由是/admin/edit，主页面上一般会渲染相应的组件，这时我们使用浏览器的刷新，界面并不会有啥变化。 但是！！！当我们build之后部署时，我们在/admin/edit这个路由上刷新就会报错404：无法找到/admin/edit。这是因为一般情况下，作者是采用前后端分离的模式，即前端只是静态文件，这样的话，当我们访问/a
解决VUE-Router 同一页面第二次进入不刷新的问题
10-15
主要介绍了解决VUE-Router 同一页面第二次进入不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
然而，在Vue-Router 3.0版本中，开发者可能会遇到一个常见问题：使用`router.push`进行页面跳转时，URL会改变，但页面内容不会自动更新，除非手动刷新页面。这个问题在GitHub上也有相关的讨论，特别是在3.0.1版本中...
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
【vue-router】history模式 前端配置，解决刷新出404问题
weixin_43435271的博客
10-30 1541
【vue-router】history模式 前端配置，解决刷新出404问题
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端修改404错误页面的配置路径，让其指向到index.html。 警告： 因为这么做以后，你的服务器就不再返回 404 错误页面
vue动态路由添加后刷新显示空白页或404
nniicchheerr的博客
05-09 8737
刷新显示空白页面 原因：页面刷新会导致vuex数据丢失，所以无法动态添加路由 1、在store user.js state中添加字段isAddRoutes:false，用来判断是否已经添加完动态路由的添加。作用：每次页面刷新时都先判断一下动态路由是否添加，若没有，重新添加动态路由。 2、在mutations中完成动态路由添加后，给字段isAddRoutes赋值为true，表明已添加动态路由 //动态添加路由 SET_RESULTASYNCROUTES(state, resultAsyncR.
vue-router动态路由刷新页面报404问题
06-23 3436
请注意：404 page must be placed at the end !!!404页面一定要放在路由的最后面，否则就会引起出错，包括动态添加路由的时候，也要放在最后面。如果是动态路由，在router下的index.js中定义一个error404路由变量， 然后在动态路由处引入：// 在这里将用户路由添加到动态路由最后之后，404路由就不是最后了，会引起刷新404问题router.addRoutes([...routes, error404])...
Vue实现远程获取路由与页面刷新导致404错误的解决
chenrui310的博客
01-13 757
因为前端Vue+ElementUI项目是单页应用——即只有一个index.html页面，如果路由从远程获取的话，每次F5或点击刷新按钮刷新页面的时候，就会找不到对应的路径而报404错误。最近的一个需求是：通过后端Api去获取前端路由表，原因是每个登录角色对应的前端路由表可能是不一样的（权限问题）先简单介绍一下现在项目情况：前后端分离，后端服务是Java写的，前端是Vue+ElementUI。将 服务器获得的[路由json字符串]转换成可访问的[前端路由组件]
部署问题-Vue Router在history模式下刷新页面404问题
yaoson的博客
09-21 3483
（2）History：原理是利用了h5的Interface 中的pushState()方法和replaceState()方法，它们提供了对浏览器历史记录进行修改的功能，但当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。在正式服务器中，将本文中的相应解决问题的代码配置到Nginx下配置SSL证书的443端口的serve下面；（1）SSL证书：（标记有“需要修改”字样的地方，是需要替换成你自己的配置）（标记有“需要修改”字样的地方，是需要替换成你自己的配置）请根据当前环境配置；
vue项目线上页面刷新报404 解决方法
ddf__的博客
11-06 610
这样的url中带有#，如果把mode: 'history’就能去掉#号，也可以正常访问，但是再次刷新页面就会出现404错误。之后在网上找到了另外一个解决方式，在服务器。配置文件里，添加如下代码，再刷新就OK了。vue-router mode 默认为。
解决vue刷新报404的详细教程
qq_21861771的博客
05-27 1399
输入这串代码即可解决上传到服务器后刷新页面报错404的问题,可以尝试一下。
Vue项目服务器部署刷新页面404问题及解决
IChen.的博客
10-23 5802
因为在vue项目开发的时候是访问自己的8080服务器,后端有进行处理，在刷新界面后找不到相对路径时，会重新渲染index.html界面，把路由的控制权交给前端，然后前端负责路由的匹配，在找到符合/jichu /123 这种格式的路由后,就会匹配成功。vue router mode 默认为hsas，这样的url中会带有#，如果改成mode:'history’就能去掉#号，也可以正常访问，但是再次刷新你页面就会出现404。因为网页上显示的是静态绝对路径，而实际上服务器上是没有改路径的，多以导致刷新汇报错误。
vue-router刷新页面
08-23
Vue Router默认情况下不会刷新页面以获取最新数据。要实现页面刷新，有几种方法可以尝试。 一种方法是使用vue-router的导航守卫。在导航守卫中，你可以监听路由变化，并在路由发生变化时执行一些逻辑。你可以使用`beforeEach`导航守卫来检查是否需要刷新页面，并在需要时执行刷新操作。下面是使用导航守卫刷新页面的示例代码： ``` router.beforeEach((to, from, next) => { if (to.path === from.path) { window.location.reload(); // 刷新当前页面 } else { next(); } }); ``` 另一种方法是定义一个空白路由，并在路由表中进行配置。你可以在路由表中添加一个空白路由，然后在这个路由的组件中执行刷新操作。下面是在路由表中定义空白路由的示例代码： ``` { path: '/redirect/:path*', component: () => import('@/views/redirect/index') } ``` 在空白路由的组件中，你可以使用`window.location.reload()`方法来刷新当前页面。 总之，要实现Vue Router的页面刷新，你可以通过导航守卫或定义一个空白路由来实现。这些方法可以确保在需要刷新页面时，获取最新的数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue项目刷新当前页面的推荐方式](https://blog.csdn.net/FellAsleep/article/details/126751041)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue项目刷新当前页面的三种方法](https://blog.csdn.net/yaxuan88521/article/details/123307992)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值