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>

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

相关推荐
魔云连洲23 分钟前
React中的合成事件
前端·javascript·react.js
人工智能训练师41 分钟前
在Ubuntu中如何使用PM2来运行一个编译好的Vue项目
linux·运维·服务器·vue.js·ubuntu·容器
浩星1 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
唐•苏凯2 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军2 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。2 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
薄雾晚晴2 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
薄雾晚晴2 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
niuhuahua2 小时前
大模型流式聊天,实时对话,快捷问题选项
vue.js
JIngJaneIL3 小时前
汽车租赁|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁系统