uniapp+vue3+ts h5页面跳转传参
时间: 2025-05-24 14:54:14 浏览: 18
### UniApp Vue3 TypeScript H5 页面间参数传递方法
在 UniApp 和 Vue3 使用 TypeScript 的项目中,实现 H5 页面间的参数传递可以通过多种方式进行。以下是几种常见的方式:
#### 1. URL 查询字符串
通过 URL 查询字符串可以方便地将参数从一个页面传递到另一个页面。
```typescript
// 跳转并携带参数
this.$router.push({
path: '/targetPage',
query: {
param1: 'value1',
param2: 'value2'
}
});
```
目标页面接收参数的方法如下[^1]:
```typescript
export default defineComponent({
setup() {
const route = useRoute();
onMounted(() => {
console.log(route.query.param1); // 输出 value1
console.log(route.query.param2); // 输出 value2
});
return {};
}
});
```
#### 2. Vuex Store
对于复杂的状态管理需求,推荐使用 Vuex 来存储全局状态数据,并在不同组件之间共享这些数据。
首先,在 `store/index.ts` 中定义 store:
```typescript
import { createStore } from 'vuex';
const store = createStore({
state() {
return {
sharedData: null,
};
},
mutations: {
setSharedData(state, data) {
state.sharedData = data;
},
},
});
export default store;
```
发送方设置共享数据:
```typescript
this.$store.commit('setSharedData', { key: 'value' });
```
接收方获取共享数据:
```typescript
setup() {
const store = useStore();
onMounted(() => {
console.log(store.state.sharedData);
});
return {};
}
```
#### 3. Event Bus (事件总线)
如果不想引入额外库或Vuex,也可以创建简单的事件总线来处理跨组件通信。
创建 eventBus 文件:
```typescript
import mitt from 'mitt';
const emitter = mitt();
export default emitter;
```
发送消息:
```typescript
emitter.emit('event-name', payload);
```
监听消息:
```typescript
onMounted(() => {
emitter.on('event-name', (data) => {
console.log(data);
});
});
```
阅读全文
相关推荐


















