一、uniapp简介
uniapp是一个开发跨平台应用的工具，它使用vue.js开发框架、WebStorm IDE和HBuilderX集成开发环境，可支持开发微信小程序、支付宝小程序、百度小程序、头条小程序、H5、App等应用。
二、uniapp跳转页面
在uniapp中，通过路由的方式进行页面跳转。路由的基本组成部分包含路径和参数。其中，路径用于指定跳转的页面路径，参数则是一些额外的信息，如id、name等等。
在uniapp中，我们通过uni.navigateTo()函数来完成页面跳转操作。具体的实现步骤如下：
1.定义一个按钮或者链接，当点击该按钮或链接时，将执行跳转操作；
<button @click="toDetail">跳转到详情页</button>
2.在toDetail方法中，调用uni.navigateTo()函数，将需要跳转的页面路径作为参数传入；
toDetail() {
uni.navigateTo({
url:'./detail?id=1'
})
}3.在跳转到的页面中，通过this.$route.query.id来获取传递的参数。
<template>
<div>
<p>获取到的参数为：{{id}}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1993" title="Sesame AI"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680065457421.png" alt="Sesame AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1993" title="Sesame AI">Sesame AI</a>
<p>一款开创性的语音AI伴侣，具备先进的自然对话能力和独特个性。</p>
</div>
<a href="/ai/1993" title="Sesame AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
id: ''
}
},
onLoad() {
this.id = this.$route.query.id;
}
}
</script>三、uniapp获取页面参数的方式
uniapp中获取页面参数主要有两种方式：query和params。在前面的示例中，我们使用了query的方式来传递和获取参数。
- query参数
query参数是url中的参数，通过uni.navigateTo()函数完成跳转之后，参数将被拼接到目标页面的url之后，如：./detail?id=1。在目标页面中，可以通过this.$route.query来获取传递的参数。
<template>
<div>
<p>获取到的参数为：{{id}}</p>
</div>
</template>
<script>
export default {
data() {
return {
id: ''
}
},
onLoad() {
this.id = this.$route.query.id;
}
}
</script>- params参数
params参数是通过路由对象传递的参数，在跳转页面的时候通过uni.navigateTo()函数的第二个参数传递。在目标页面中，可以通过this.$route.params来获取传递的参数。
toDetail() {
uni.navigateTo({
url:'./detail',
params: {
id: 1
}
})
}
<template>
<div>
<p>获取到的参数为：{{id}}</p>
</div>
</template>
<script>
export default {
data() {
return {
id: ''
}
},
onLoad() {
this.id = this.$route.params.id;
}
}
</script>总结
通过本文的介绍，我们了解了uniapp进行页面跳转的基本方式，以及获取页面参数的方式。在实际项目中，需要根据具体的业务需求来选择合适的方式进行参数的传递和获取。通过学习和掌握这些基础知识，我们可以更好地进行uniapp开发，提高开发效率，为用户提供更好的应用体验。
