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>

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

相关推荐
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
wen's4 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim5 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim5 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心5 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络5 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.5 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
失落的多巴胺7 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5