uniapp在vue3如何接收页面跳转参数
时间: 2023-12-04 17:03:20 浏览: 51
在Vue 3中,使用uni-app框架接收页面跳转参数有两种常见的方法:
1. 使用$route对象:
在uni-app中,可以通过$route对象来获取当前页面的相关信息,包括参数。
在目标页面中,可以通过$route对象的query属性来获取页面跳转时传递的参数。
例如,如果跳转链接为`/pages/detail?id=123`,那么在目标页面中可以通过`this.$route.query.id`来获取id参数的值。
2. 使用props属性:
Vue 3引入了Composition API,可以使用`setup`函数来接收参数。
在目标页面的`setup`函数中,可以使用`props`属性来接收页面跳转时传递的参数。
例如,在目标页面的`setup`函数中定义一个props属性,如下所示:
```javascript
import { ref, onMounted } from 'vue';
export default {
setup(props) {
const id = ref('');
onMounted(() => {
id.value = props.id;
});
return {
id
};
}
}
```
然后,在跳转链接中使用`:id`来传递参数,如下所示:
```html
<template>
<view>
<text>{{ id }}</text>
</view>
</template>
<script>
export default {
methods: {
navigateToDetail() {
uni.navigateTo({
url: '/pages/detail?id=' + this.id
});
}
}
}
</script>
```
在目标页面中,就可以通过`id.value`来获取参数值了。
以上是在Vue 3中使用uni-app框架接收页面跳转参数的两种常见方法。希望能对你有所帮助!