若依 vue版 刷新页面 404 回到网站首页 index页面的问题

访问若依后台地址后,刷新当前所在的页面,页面反而跳转回了网站首页的问题:

刷新 http://www.test.com/admin/test/testOrder,页面直接重定向到了 http://www.test.com/ 或者404界面。

若依前后分离版的前端是基于vue ,而vue是单页应用,所以每次刷新当前页面 浏览器都会根据url去找对应的页面文件 而对于vue项目来说 根据url找文件 肯定是找不到的,所以就会404,我的nginx设置了找不到对应页面就自动跳转到nginx指定的默认页(大部分默认是index.html) ,页面就直接跳回了网站首页...。

所以,干脆使用hash模式:

ruoyi-ui/src/router/index.js 的 Router中  将mode:history改成hash模式

 history模式路径

http://www.test.com/admin/test/testOrder

hash模式路径:#号后的所有内容都被当做参数使用,而不是url

http://www.test.com/admin/#/test/testOrder

------ 下面不用看 -------------

是否需要去nginx的配置文件中新增一行指向,如果找不到对应的url,则跳转到index.html 

try_files $uri $uri/ /index.html;

相关参考:https://blog.csdn.net/MZ199290/article/details/107604597

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue开发中,当页面上线后刷新页面可能会出现404错误的问题。这是因为Vue默认使用的是hash模式(mode: 'hash'),在URL中带有#号。虽然页面可以正常访问,但是再次刷新页面会出现404错误。为了去掉URL中的#号,可以将路由模式改为history模式(mode: 'history')。使用history模式后,需要修改nginx配置文件来解决刷新页面404问题。 具体操作步骤如下: 1. 在Vue项目中,创建一个新的Router实例时,将模式设置为history模式,即mode: 'history'。 2. 修改nginx配置文件,添加以下代码: ``` location / { try_files $uri $uri/ /index.html; # 解决页面刷新404问题 } ``` 3. 保存并退出nginx配置文件。 4. 验证nginx配置文件是否正确:运行命令`../nginx -t`。 5. 重启nginx:运行命令`../nginx -s reload`。 请注意,修改完nginx配置文件后必须要重启nginx,否则修改将不会生效。 总结:以上方法主要针对Vue开发中刷新页面出现404错误的问题进行解决。需要注意的是,在使用路由导航时(如使用<router-link>或编程式导航),Vue Router会自动处理路由切换并避免出现404错误。以上处理方式主要是针对直接刷新页面时可能出现的404问题。如果您需要更详细的解决方案,可以参考和提供的链接文档。 引用: 文章链接:https://www.cnblogs.com/ling-yu-amen/p/11533726.html Vue Router官方文档及路由导航处理<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue项目线上页面刷新404 解决方法](https://blog.csdn.net/wwppp987/article/details/118968859)[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_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue项目刷新404处理方式](https://blog.csdn.net/m0_71966801/article/details/131753529)[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_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue下使用nginx刷新页面404问题解决](https://download.csdn.net/download/weixin_38746166/12938391)[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_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值