vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)

 一、找不到js模块

解决方法: 配置Nginx配置文件:

// root /your/program/path/dist
root /www/wwwroot/my_manage_backend_v1/dist;

 二、刷新页面导致404问题(Not found)

        经过一系列配置后发现进入页面一切正常,包括路由前进和回退,但是一刷新页面就会出现404 页面丢失问题:

 解决方法:配置Nginx配置文件:

location / {
       
    try_files $uri $uri/ /index.html;
    
    ...
}

三、405问题(Not allowed)

        部署后发现能够进入登录页面即index.html页面,但每次点击登录就报错405问题:

要是你前端和后端确保没有配置错

### 如何在 UniApps 中防止刷新导致的页面栈混乱 #### 页面生命周期管理 为了有效处理页面刷新带来的页面栈混乱问题,在开发过程中应充分利用 `onLoad` 和 `onShow` 生命周期函数来初始化数据和状态。每次页面显示时重新加载必要的资源,确保即使发生刷新也能维持一致的状态[^1]。 #### 使用缓存机制保存页面状态 通过利用 `uni.setStorageSync()` 方法可以在本地存储重要变量或对象,当页面再次打开时可通过 `uni.getStorageSync()` 获取之前保存的数据并恢复界面到之前的浏览位置。这种方法特别适用于表单填写场景或其他需要保持用户输入内容的情况。 ```javascript // 存储当前页码作为例子 let currentPageIndex = 5; uni.setStorageSync('pageIndex', currentPageIndex); // 下次进入此页面读取该值 const savedPageIndex = uni.getStorageSync('pageIndex') || 0; console.log(`上次离开的位置是第 ${savedPageIndex} 页`); ``` #### 配置路由模式避免重复入栈 对于某些特定类型的页面(如详情页),可以通过设置全局配置文件中的 `navigationStyle` 属性为 custom 来实现自定义导航栏效果,并配合编程方式控制跳转逻辑,从而减少不必要的页面压栈操作[^2]。 ```json { "pages": [ { "path": "pages/detail/index", "style": { "navigationStyle": "custom" } } ] } ``` #### 处理返回键行为 针对 Android 设备上的物理返回按键,默认情况下可能会造成意外关闭应用等问题。因此建议监听 `onBackPress` 事件,在适当时候拦截默认动作并执行自定义退出流程,比如提示确认对话框给用户提供更好的体验[^3]。 ```javascript export default { onBackPress() { if (this.canExit) { // 自定义条件判断是否允许退出 plus.runtime.quit(); return true; // 表示已经处理了返回按钮点击事件 } else { this.showConfirmDialog(); // 显示询问是否真的要离开的弹窗 return false; // 返回false表示不阻止系统默认的行为 } }, }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值