uniapp+vue3路由跳转传参

在uni-app中使用Vue 3进行路由跳转传参,可以通过以下步骤实现:

1.在router文件夹中创建一个名为index.js的文件,用于配置路由。在这个文件中,我们将导入createRoutercreateWebHistory函数,并定义路由规则。同时,我们还需要定义一个导航守卫,用于在路由跳转时传递参数。

javascript 复制代码
// 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.vueAbout.vue。在这些文件中,我们将使用Vue 3的语法糖编写组件内容。同时,我们需要在组件的setup方法中接收并处理传递过来的参数。

html 复制代码
<!-- 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>
html 复制代码
<!-- 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>

现在,当你点击"前往关于页面"按钮时,应用程序将导航到关于页面,并在控制台输出传递的参数。同样,当你点击"返回首页"按钮时,应用程序将返回首页,并在控制台输出传递的参数。

相关推荐
bosscheng6 小时前
0到1理解web音视频从采集到传输到播放系列之《Jessibuca系列篇音视频解封装》
javascript·音视频开发
恶猫6 小时前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
uhakadotcom7 小时前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试
给月亮点灯|7 小时前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He7 小时前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头7 小时前
v-model与.aync的区别
前端·javascript·vue.js
xvmingjiang8 小时前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
我有一只臭臭8 小时前
ES5 和 ES6 类的实现
前端·javascript·es6
2301_821046528 小时前
Python的深度学习
开发语言·javascript·ecmascript
小高0078 小时前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试