在uni-app中使用Vue 3进行路由跳转传参，可以通过以下步骤实现：
1.在router文件夹中创建一个名为index.js的文件，用于配置路由。在这个文件中，我们将导入createRouter和createWebHistory函数，并定义路由规则。同时，我们还需要定义一个导航守卫，用于在路由跳转时传递参数。
// router/index.js import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] const router = createRouter({ history: createWebHistory(), routes }) router.beforeEach((to, from, next) => { // 在这里处理路由跳转时的参数传递 console.log('跳转前的参数：', to.params) next() }) export default router
2.在views文件夹中创建两个组件文件：Home.vue和About.vue。在这些文件中，我们将使用Vue 3的语法糖编写组件内容。同时，我们需要在组件的setup方法中接收并处理传递过来的参数。
<!-- views/Home.vue --> <template> <div> <h1>首页</h1> <button @click="goToAbout">前往关于页面</button> </div> </template> <script> export default { setup(props) { const goToAbout = () => { // 在这里处理参数传递 console.log('传递的参数：', props.params) this.$router.push({ name: 'About', params: { id: 1 } }) } return { goToAbout } } } </script>
<!-- views/About.vue --> <template> <div> <h1>关于页面</h1> <button @click="goToHome">返回首页</button> </div> </template> <script> export default { setup(props) { const goToHome = () => { // 在这里处理参数传递 console.log('传递的参数：', props.params) this.$router.push({ path: '/' }) } return { goToHome } } } </script>
现在，当你点击“前往关于页面”按钮时，应用程序将导航到关于页面，并在控制台输出传递的参数。同样，当你点击“返回首页”按钮时，应用程序将返回首页，并在控制台输出传递的参数。
