uniapp vue3 + ts跳转页面获取参数
时间: 2025-05-02 13:00:47 浏览: 71
### 实现 UniApp 中基于 Vue 3 和 TypeScript 的页面跳转并获取传递参数
在 UniApp 开发环境中,利用 Vue 3 及其组合 API 特性可以方便地处理页面间的导航以及参数传递。下面介绍一种方式来完成此操作。
#### 使用 `uni.navigateTo()` 进行页面跳转并携带参数
当需要从当前页面 A 跳转到另一个新页面 B 并附带一些数据时,可以通过 `uni.navigateTo` 方法,并借助 URL 查询字符串的形式发送这些额外的信息给目标页面:
```javascript
// 假设这是源页面A中的逻辑部分
const navigateToPageB = () => {
uni.navigateTo({
url: '/pages/pageB/index?paramKey=paramValue'
});
};
```
上述代码片段展示了如何构建带有查询参数 (`paramKey`) 的 URL 来启动新的页面实例[^1]。
#### 在接收方页面解析传入的参数
对于目的地页面而言,则需在其生命周期钩子函数内读取由上一页带来的参数值。这里推荐采用 Composition API 方式来进行编码,在目的页面 Page B 的 `<script setup>` 或者普通的 `<script>` 标签里加入如下所示的内容:
```typescript
import { onMounted, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
onLoad((options) => {
console.log('Received options:', options);
});
```
这段脚本会在每次加载该页面的时候自动执行一次,从而允许开发者访问通过链接传输过来的数据项。注意这里的 `onLoad` 是 UniApp 提供的一个特殊的生命周期事件处理器,它会接收到一个对象作为参数,这个对象包含了所有来自前一页面附加于 URL 后面的关键字-数值对。
#### 处理更复杂的场景下的参数交换
如果遇到更加复杂的情况——比如想要传送的对象结构较为庞大而不适合直接放入 URL ——那么可以选择其他途径如 Vuex Store 或 LocalStorage 等持久化存储机制暂存临时状态;或者是使用全局事件总线(Event Bus),不过这种方式已逐渐被废弃不再建议用于现代应用开发中[^2]。
阅读全文
相关推荐














