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 、使用组件 |
页面重定向 | 当前页面出栈，新页面入栈 | 调用 API uni.redirectTo 、使用组件 |
页面返回 | 页面不断出栈，直到目标返回页 | 调用 API uni.navigateBack 、使用组件 |
Tab 切换 | 页面全部出栈，只留下新的 Tab 页面 | 调用 API uni.switchTab 、使用组件 |
重加载 | 页面全部出栈，只留下新的页面 | 调用 API uni.reLaunch 、使用组件 |
页面传参
方式1：onLoad 接收
// 跳转uni.navigateTo({url: "/pages/sendManagement/index?id=123",})方式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。
