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

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

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

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

项目初始化完成，对应的 pagejson 文件为：

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

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

1、navigator组件跳转

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

navigator 属性有：

open-type 有效值

2、uni-app API 跳转

使用 API 页面跳转方式有：

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

方式1：onLoad 接收

方式2：setup语法糖接收

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

看到这，相信很快就能上手 uni-app + vue3 项目路由喽，也可以参考官网教程：>

uniapp是做移动端的，vue是做PC端的，uniapp就是基于vue设计的，它们的主要区别就是端口不一样，其他的功能作用都是一样的，虽然vue和uniapp可以多端编译，输出H5和小程序，但它们的css写法是受限的。

在App端，如果使用vue页面，则使用webview渲染。如果使用nvue页面（native vue的缩写），则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hellouniapp示例就是如此。

vue的主要功能

vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

另一方面，vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。vue还支持40款手绘贴纸，还可以编辑贴纸的出现时间。

分析 ：app端无法解析业务数据data；但是响应头与h5端相比多了3个android相关的参数，即 X-Android-Sent-Millis 、 X-Android-Response-Source 和 X-Android-Received-Millis 。

解决 ：修改该uni-app项目的配置文件mainfestjson，选择App常用其他设置，自定义组件模式默认是开启的， 关闭自定义组件模式 并 重启开发工具 即解决app端无法解析业务数据的问题，此时app端获取到的响应头的参数与h5端是一样的。

(1) 请求服务器A中的接口a（app端和h5端都能请求到业务数据）

(2) 请求服务器B中的接口b

问题 ：app端请求的业务数据data一直为“200 OK”，但h5端可以请求到业务数据。

分析 ：应该是响应头的问题。

总结 ：h5端正常解析，但是app端数据解析异常，可能原因是不同语言对header解析不一样（有些语言是弱语言，兼容性没有那个大）。

要破解uniapp的源码，首先需要准备一些必要的工具，比如：反编译工具、调试工具、抓包工具等。

1、反编译工具：可以将uniapp的源码反编译成可读的源码，以便于分析和修改，常用的反编译工具有JAD、JEB、IDA Pro等。

2、调试工具：可以帮助我们更好地理解uniapp的源码，常用的调试工具有Chrome调试工具、V8调试工具、Xcode调试工具等。

3、抓包工具：可以抓取uniapp的网络请求，以便于分析和修改，常用的抓包工具有Charles、Fiddler、Wireshark等。

破解uniapp的源码的具体步骤如下：

1、使用反编译工具反编译uniapp的源码，以便于分析和修改。

2、使用调试工具查看uniapp的源码，以便于更好地理解uniapp的源码。

3、使用抓包工具抓取uniapp的网络请求，以便于分析和修改。

4、根据反编译、调试和抓包的结果，修改uniapp的源码，以达到破解的目的。

此外，在破解uniapp的源码时，还需要注意以下几点：

1、要有足够的编程知识，以便于更好地理解uniapp的源码。

2、要有足够的网络知识，以便于更好地分析和修改uniapp的网络请求。

3、要有足够的安全知识，以便于更好地防范安全漏洞。

4、要有足够的审计知识，以便于更好地审计uniapp的源码。

使用组件传值。在uniapp中，可以使用组件传值的方式将需要展示的数据传递给详情页，在组件中，可以通过定义props属性来接收父组件传递的数据，在详情页中直接使用即可。还可以使用全局变量来存储需要展示的数据，在详情页中直接使用即可。

1 可能存在问题

2 可能是因为uniapp框架存在某些不兼容的情况，也可能是代码逻辑出现问题导致页面无法渲染。

3 需要检查代码逻辑和相关文档，尝试解决问题。

如果问题无法解决，可以考虑寻求开发者社区或官方技术支持的帮助。

1两个普通页面之间的跳转用uninavgateTo()，url可携带参数。

2普通页面跳tabbar配置过的页面需要uniswitchTab()，url不能传值。

3unireLaunch()万金油跳转，可以跳转任何页面(克服了普通页面跳tabbar配置的页面url不能传值的问题。)

4突出中间按钮的midButton，是偶数才能显示，但只支持真机环境，浏览器是没有效果的。

6页面生命周期(考虑的是页面刷新带来的影响)：

onLoad、onShow、onReady

应用生命周期，指appvue里面的这三个

7箭头函数没有this指向（慎用），如果在控制台打印this是undefined的，证明是箭头函数在作怪，在特殊场合别贪方便，有时候会遇到抓破头皮也找不到问题所在，就是箭头函数搞的鬼。

8unirequest（{,success:function(res){})}）请求成功返回的数据直接使用this直接赋值是不生效的，因为这是一个异步函数，需要借助一个指向：let that = this

9setStorageSync 数据缓存是用来2个页面交互的，传数据传值,写在onLoad里面。

10uni-app的<view>标签等于div标签，独占一行。

5和风天气官网提供的API是免费的，每人一天1000次数，够练手了。

首先uni-app提供的数据缓存Storage分四种模式：

一种是set（用于存储数据）、一种是get(用于获取数据)、一种是remove

(用于移除指定数据)、最后一种是clear(清除缓存数据)

然后区分：带Sync字段是同步的，没有带的是异步。

查看缓存数据的界面面板：

谷歌浏览器--开发者工具--Application--Storage--Local Storage

上面这个面板就是进行查看数据缓存相关信息的。

下面进行异步数据缓存展示，就是没带Sync字段的，顺序：先有set模式-->get模式-->remove模式-->clear模式（一般很少用）

首先准备三个按钮，分别对应上面的三个功能： 存储数据、获取数据、移除数据

方法定义：

功能实现：

(1)存储数据

unisetStorage(OBJECT)

这个对象里面传入一个key和一个data,你可以理解为键值对的形式，然后一个回调函数success

当我们点击“存储数据”的这个按钮时，我们来到面板就会看到数据已经缓存成功呈现在面板上。而key为键，data为值。

(2)获取数据

unigetStorage() 用于获取缓存的数据

这里的key对应setStorage的key,然后再success回调函数里面接受res返回数据的结果，控制台输出。

(3)移除数据

一般用于移除整个数据。

回到数据缓存的面板查看，发现key为"student"的字段已经完整移除。

带Sync的,不需要指定特定的键(key)和值(data)。

以setStorageSync(key,value)为例子，同步可以直接接受参数，第一个参时就是key键，第二个参数为value值。

将上面的例子改成同步，效果是一样的。

数据缓存：

获取数据：

以上就是关于三、Uni-app + vue3 页面如何跳转及传参全部的内容，包括:三、Uni-app + vue3 页面如何跳转及传参、uniapp是做什么的、uniapp网络调试问题汇总等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！