- 当前位置：首页 >数据库 >Uni-app + Vue3 页面如何跳转及传参？
Uni-app + Vue3 页面如何跳转及传参？
发布时间：2025-11-04 07:32:29 来源：云智核 作者：系统运维
Vue 项目往往需要使用 vue-router 插件，面何刚开始入门 Uni-app + Vue3 项目的跳转同学，会不会想着路由使用 vue-router V4 版本不就可以了吗？及传
不怕大家笑话，我就是面何这样想的，毕竟我是跳转第一次使用 Uni-app ，由于孕期记性贼差，及传所以我决定写成笔记，面何加深记忆。跳转
uni-app 页面路由为框架统一管理的及传，我们需要在 page.json 文件里配置每个页面路由以及页面样式，面何有些类似小程序中的跳转 app.json 文件，所以 uni-app 的及传路由用法和写法与 vue-router 不同。
项目初始化完成，面何对应的跳转 page.json 文件为：
{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index",及传"style": {"navigationBarTitleText": "uni-app"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}}pages 属性
uni-app 通过 pages 节点配置应用都有哪些页面，接收一个数组，每个元素都是一个对象，属性有：
属性
类型
默认值
描述
path
String
配置页面路径
style
Object
配置面状态栏、导航栏、标题、窗口背景色
pages 节点的第一项为应用入口页（即首页）。应用中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写后缀，企商汇框架会自动寻找路径下的页面资源。页面跳转
uni-app 页面路由跳转有两种方式：使用 navigator 组件跳转、调用API 跳转。
1、navigator组件跳转类似于 a 标签，但是只能跳转到本地页面，目标页面必须在 page.json 中注册。
<navigator url="/pages/animation-major/index" open-type="navigate"><el-button type="primary">查询</el-button></navigator>navigator 属性有：
属性名
类型
默认值
说明
平台差异说明
url
String
应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type
String
navigate
跳转方式
delta
Number
当 open-type 为 navigateBack 时有效，表示回退的层数
animation-type
String
pop-in/out
当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画
App
animation-duration
Number
300
当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。
App
hover-class
String
navigator-hover
指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation
Boolean
false
指定是否阻止本节点的祖先节点出现点击态
微信小程序
hover-start-time
Number
50
按住后多久出现点击态，单位毫秒
hover-stay-time
Number
600
手指松开后点击态保留时间，单位毫秒
target
String
self
在哪个小程序目标上发生跳转，默认当前小程序，亿华云值域self/miniProgram
微信2.0.7+、百度2.5.2+、QQ
open-type 有效值值
说明
平台差异说明
navigate
对应 uni.navigateTo 的功能
redirect
对应 uni.redirectTo 的功能
switchTab
对应 uni.switchTab 的功能
reLaunch
对应 uni.reLaunch 的功能
字节跳动小程序与飞书小程序不支持
navigateBack
对应 uni.navigateBack 的功能
exit
退出小程序，target="miniProgram"时生效
微信2.1.0+、百度2.5.2+、QQ1.4.7+
2、uni-app API 跳转uni.navigateTo({url: "/pages/animation-major/index",})使用 API 页面跳转方式有：
uni.navigateTo： 保留当前页面，跳转到应用内的某个页面，使用 navigateBack 可以返回到上一页。uni.navigateBack：关闭当前页面，返回上一级或多级页面。delta 属性设置返回层级，大于页面数时返回首页。uni.redirectTo：关闭当前页面，跳转到应用内的某个页面。uni.reLaunch：关闭应用内所有页面，打开应用内某个页面。uni.switchTab：跳转到 tabBar 页面，关闭其他非 tabBar 页面。uni.preloaPage：预加载页面，是一种性能优化技术，被预载的页面，在打开时速度更快。页面栈
框架以栈的云服务器形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：
路由方式
页面栈表现
触发时机
初始化
新页面入栈
uni-app 打开的第一个页面
打开新页面
新页面入栈
调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"/>
页面重定向
当前页面出栈，新页面入栈
调用 API uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/>
页面返回
页面不断出栈，直到目标返回页
调用 API uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换
页面全部出栈，只留下新的 Tab 页面
调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab
重加载
页面全部出栈，只留下新的页面
调用 API uni.reLaunch 、使用组件 <navigator open-type="reLaunch"/>
页面传参
方式1：onLoad 接收
// 跳转uni.navigateTo({url: "/pages/sendManagement/index?id=123",})<script>import { onMounted } from vue;let parmes = null;export default {onLoad(options){parmes = options;},setup() {onMounted(() => {console.log(接受上个页面传的值,parmes)})}}</script>方式2：setup语法糖接收
<script setup>import { onMounted, getCurrentInstance } from vue;onMounted(()=>{let options = getCurrentInstance()console.log("options--->",options.attrs);})</script>onLoad 函数是监听页面加载，接收的参数是页面传递的数据，是一个 object 类型。
看到这，相信很快就能上手 uni-app + vue3 项目路由喽，也可以参考官网教程：
https://uniapp.dcloud.io/tutorial/page.html#%E8%B7%AF%E7%94%B1。
- 小熊系统U盘教程（简单操作，轻松安装小熊系统U盘，让电脑高效运行）
- 电脑启动盘使用教程（轻松学会创建和使用电脑启动盘）
- 索尼Z3防水性能的全面评估（探索索尼Z3防水功能，了解其可靠性与实用性）
- 台式电脑设置U盘启动教程（简明易懂的U盘启动指南，让你的台式电脑焕发新生）
- 如何制作U盘启动盘（简单易行的步骤帮您快速制作一枚U盘启动盘）
- LG60LG61CHCD的特点与优势（打造高质量音乐体验的专业级CD播放器）
- 如何利用移动硬盘安装操作系统（一步步教你将操作系统安装到移动硬盘上）
- 固态硬盘如何正确安装分区（教你一步步完成固态硬盘的分区操作）
- 尼康200.500镜头评测（探究尼康200.500镜头的特点和优势）
- 长沙天空数码（全方位服务，优质体验，长沙天空数码引领数码时代潮流）
- 掌握Mac电脑新系统的技巧与窍门（从入门到精通，轻松驾驭Mac电脑新系统）
- 如何重新安装系统以提升DellInspiron1440的性能（以Insprion1440为例，详细教程帮您轻松完成系统重装）
- 以伯恩品质测量的效果及应用（探究以伯恩品质测量的优点和适用领域）
- MacMinii5的性能评估（一款高性能小巨人的综合分析）
- 电脑屏幕手动维修教程（简单易行的DIY维修，让你的电脑屏幕焕然一新）
- VivoXplay5（VivoXplay5的性能和功能是否适合玩游戏？）
- 红米2手机体验报告（以红米2为主体，体验红米2手机使用情况，了解其性能与功能特点。）
- 以X83吸异味，让空气清新如初（科技新潮的除臭利器，让你远离异味困扰）
- 电脑模拟定位教程——掌握精准定位的关键技巧（用电脑模拟定位，让您的位置不再迷失）
- 戴尔3905游戏表现如何？（一款值得尝试的游戏利器）
随便看看
- Copyright © 2025 Powered by Uni-app + Vue3 页面如何跳转及传参？,云智核 滇ICP备2023006006号-28sitemap