uni-app 路由无前进功能

uni-app 路由无前进功能

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

bug描述：

有页面A，页面A使用navigateTo 跳至页面B，B有个文本框和一个返回，在文本框中输入值 后返回，再使用navigateTo 进入B，文本框内容没有了。

A页面：

uni.navigateTo({url"B"});

B页面：

uni.navigateBack()

A页面再次：

uni.navigateTo({url"B"});

这时B页面是一个新页面，不是之前编辑过的页面。

示例代码：

A页面：

uni.navigateTo({url"B"});

B页面：

uni.navigateBack()

A页面再次：

uni.navigateTo({url"B"});

更多关于uni-app 路由无前进功能的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 路由无前进功能的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是 uni-app 路由机制的正常表现，不是 bug。

原因分析：

  1. uni.navigateTo 每次都会创建新页面实例

    • 每次调用 uni.navigateTo({url: 'B'}) 都会创建一个全新的 B 页面实例
    • 页面 B 被创建时，其 data 数据会重新初始化
    • 文本框内容属于页面实例的临时状态，新实例自然没有之前输入的内容

  2. 页面栈管理机制

    • 第一次 A → B：页面栈为 [A, B]
    • B 返回时：页面栈恢复为 [A]，B 页面实例被销毁
    • 第二次 A → B：重新创建 B 实例，页面栈再次变为 [A, B]

解决方案：

  1. 使用全局状态管理

    // 在 B 页面输入时保存数据
onUnload() {
  uni.setStorageSync('B_input_value', this.inputValue)
}

onLoad() {
  // 加载时恢复数据
  this.inputValue = uni.getStorageSync('B_input_value') || ''
}

  2. 使用 Vuex/pinia 状态管理

    • 将页面状态存储在全局 store 中
    • 页面销毁时状态不会丢失

  3. 使用页面通信（适合简单场景）

    // A 页面跳转时传递参数
uni.navigateTo({
  url: 'B?inputValue=' + encodeURIComponent(this.lastInputValue)
})
回到顶部