简介
UniApp是一款基于Vue.js开发的跨平台应用框架，可以通过一套代码开发同时在多个平台上运行，包括小程序、App以及H5页面等。本文将介绍如何使用Vue3的语法，结合UniApp的uni.navigateTo方法进行页面跳转，并获取传递的参数。
使用uni.navigateTo进行页面跳转
在UniApp中，可以使用uni.navigateTo方法进行页面跳转，该方法接受一个对象参数，包含了跳转的目标页面路径（url）以及其他可选的参数。
// 在当前页面跳转到目标页面
uni.navigateTo({
url: '/pages/targetPage'
});
传递参数
如果需要将参数传递给目标页面，可以在url中使用query参数进行传递，格式为key=value。
// 在当前页面跳转，同时传递参数
uni.navigateTo({
url: '/pages/targetPage?name=UniApp&age=3'
});
在目标页面中，可以使用$route对象获取传递的参数。
<template>
<view>
<text>{{ $route.query.name }}</text>
<text>{{ $route.query.age }}</text>
</view>
</template>
Vue3语法支持
UniApp默认支持Vue2语法，但可以通过升级Vue包的方式使用Vue3语法。
首先，需要在项目根目录下的package.json文件中修改依赖的Vue版本为3。
"dependencies": {
"vue": "^3.0.11",
...
}
然后，执行npm install命令来安装最新的Vue版本。
完成了以上步骤后，UniApp将支持使用Vue3的新特性。
示例代码
以下是一个使用Vue3语法结合UniApp的uni.navigateTo方法进行页面跳转并传递参数的示例代码。
<template>
<view>
<button @click="navigateToTargetPage">跳转到目标页面</button>
</view>
</template>
<script>
export default {
methods: {
navigateToTargetPage() {
uni.navigateTo({
url: `/pages/targetPage?name=${this.name}&age=${this.age}`
});
}
}
}
</script>
在目标页面中，可以通过$route对象获取传递的参数。
<template>
<view>
<text>{{ $route.query.name }}</text>
<text>{{ $route.query.age }}</text>
</view>
</template>
结语
通过使用Vue3的语法，我们可以更加灵活地开发UniApp应用，并结合uni.navigateTo方法进行页面跳转和参数传递。希望本文对你有所帮助！
本文来自极简博客，作者：烟雨江南，转载请注明原文链接：UniApp使用Vue3语法利用uni.navigateTo跳转和接收参数
