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 節點配置應用都有哪些頁面，接收一個數組，每個元素都是一個對象，屬性有：

• 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 屬性有：

open-type 有效值

2、uni-app API 跳轉

uni.navigateTo({url: "/pages/animation-major/index",})

使用 API 頁面跳轉方式有：

1. uni.navigateTo： 保留當前頁面，跳轉到應用內的某個頁面，使用 navigateBack 可以返回到上一頁。
2. uni.navigateBack：關閉當前頁面，返回上一級或多級頁面。delta 屬性設置返回層級，大于頁面數時返回首頁。
3. uni.redirectTo：關閉當前頁面，跳轉到應用內的某個頁面。
4. uni.reLaunch：關閉應用內所有頁面，打開應用內某個頁面。
5. uni.switchTab：跳轉到 tabBar 頁面，關閉其他非 tabBar 頁面。
6. uni.preloaPage：預加載頁面，是一種性能優化技術，被預載的頁面，在打開時速度更快。

頁面棧

框架以棧的形式管理當前所有頁面， 當發生路由切換的時候，頁面棧的表現如下：

頁面傳參

方式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。