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数组中第一项表示应用启动页，参考：		{			"path": "pages/index/index",			"style": {				"navigationBarTitleText": "uni-app"			}		}	],	"globalStyle": {		"navigationBarTextStyle": "black",		"navigationBarTitleText": "uni-app",		"navigationBarBackgroundColor": "#F8F8F8",		"backgroundColor": "#F8F8F8"	}}

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 项目路由喽，也可以参考官网教程：