三、Uni-app + vue3 页面如何跳转及传参？

Posted 2023-03-14

参考技术A

Vue 项目往往需要使用 vue-router 插件，刚开始入门 Uni-app + Vue3 项目的同学，会不会想着路由使用 vue-router V4 版本不就可以了吗？

不怕大家笑话，我就是这样想的，毕竟我是第一次使用 Uni-app ，由于孕期记性贼差，所以我决定写成笔记，加深记忆。

uni-app 页面路由为框架统一管理的，我们需要在 page.json 文件里配置每个页面路由以及页面样式，有些类似小程序中的 app.json 文件，所以 uni-app 的路由用法和写法与 vue-router 不同。

项目初始化完成，对应的 page.json 文件为：

uni-app 通过 pages 节点配置应用都有哪些页面，接收一个数组，每个元素都是一个对象，属性有：

uni-app 页面路由跳转有两种方式：使用 navigator 组件跳转、调用API 跳转。

1、navigator组件跳转

类似于 a 标签，但是只能跳转到本地页面，目标页面必须在 page.json 中注册。

navigator 属性有：

open-type 有效值

2、uni-app API 跳转

使用 API 页面跳转方式有：

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

方式1：onLoad 接收

方式2：setup语法糖接收

onLoad 函数是监听页面加载，接收的参数是页面传递的数据，是一个 object 类型。

看到这，相信很快就能上手 uni-app + vue3 项目路由喽，也可以参考官网教程：https://uniapp.dcloud.io/tutorial/page.html#%E8%B7%AF%E7%94%B1