Uni-app + Vue3 頁(yè)面如何跳轉(zhuǎn)及傳參？
Vue 項(xiàng)目往往需要使用 vue-router 插件，剛開始入門 Uni-app + Vue3 項(xiàng)目的同學(xué)，會(huì)不會(huì)想著路由使用 vue-router V4 版本不就可以了嗎？
不怕大家笑話，我就是這樣想的，畢竟我是第一次使用 Uni-app ，由于孕期記性賊差，所以我決定寫成筆記，加深記憶。
uni-app 頁(yè)面路由為框架統(tǒng)一管理的，我們需要在 page.json 文件里配置每個(gè)頁(yè)面路由以及頁(yè)面樣式，有些類似小程序中的 app.json 文件，所以 uni-app 的路由用法和寫法與 vue-router 不同。
項(xiàng)目初始化完成，對(duì)應(yīng)的 page.json 文件為：
{"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：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 節(jié)點(diǎn)配置應(yīng)用都有哪些頁(yè)面，接收一個(gè)數(shù)組，每個(gè)元素都是一個(gè)對(duì)象，屬性有：
屬性 | 類型 | 默認(rèn)值 | 描述 |
path | String | 配置頁(yè)面路徑 | |
style | Object | 配置面狀態(tài)欄、導(dǎo)航欄、標(biāo)題、窗口背景色 |
- pages 節(jié)點(diǎn)的第一項(xiàng)為應(yīng)用入口頁(yè)（即首頁(yè)）。
- 應(yīng)用中新增/減少頁(yè)面，都需要對(duì) pages 數(shù)組進(jìn)行修改。
- 文件名不需要寫后綴，框架會(huì)自動(dòng)尋找路徑下的頁(yè)面資源。
頁(yè)面跳轉(zhuǎn)
uni-app 頁(yè)面路由跳轉(zhuǎn)有兩種方式：使用 navigator 組件跳轉(zhuǎn)、調(diào)用API 跳轉(zhuǎn)。
1、navigator組件跳轉(zhuǎn)
類似于 a 標(biāo)簽，但是只能跳轉(zhuǎn)到本地頁(yè)面，目標(biāo)頁(yè)面必須在 page.json 中注冊(cè)。
<navigator url="/pages/animation-major/index" open-type="navigate"><el-button type="primary">查詢</el-button></navigator>
navigator 屬性有：
屬性名 | 類型 | 默認(rèn)值 | 說明 | 平臺(tái)差異說明 |
url | String | 應(yīng)用內(nèi)的跳轉(zhuǎn)鏈接，值為相對(duì)路徑或絕對(duì)路徑，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后綴 | ||
open-type | String | navigate | 跳轉(zhuǎn)方式 | |
delta | Number | 當(dāng) open-type 為 'navigateBack' 時(shí)有效，表示回退的層數(shù) | ||
animation-type | String | pop-in/out | 當(dāng) open-type 為 navigate、navigateBack 時(shí)有效，窗口的顯示/關(guān)閉動(dòng)畫效果，詳見：窗口動(dòng)畫 | App |
animation-duration | Number | 300 | 當(dāng) open-type 為 navigate、navigateBack 時(shí)有效，窗口顯示/關(guān)閉動(dòng)畫的持續(xù)時(shí)間。 | App |
hover-class | String | navigator-hover | 指定點(diǎn)擊時(shí)的樣式類，當(dāng)hover-class="none"時(shí)，沒有點(diǎn)擊態(tài)效果 | |
hover-stop-propagation | Boolean | false | 指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài) | 微信小程序 |
hover-start-time | Number | 50 | 按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位毫秒 | |
hover-stay-time | Number | 600 | 手指松開后點(diǎn)擊態(tài)保留時(shí)間，單位毫秒 | |
target | String | self | 在哪個(gè)小程序目標(biāo)上發(fā)生跳轉(zhuǎn)，默認(rèn)當(dāng)前小程序，值域self/miniProgram | 微信2.0.7+、百度2.5.2+、QQ |
open-type 有效值
值 | 說明 | 平臺(tái)差異說明 |
navigate | 對(duì)應(yīng) uni.navigateTo 的功能 | |
redirect | 對(duì)應(yīng) uni.redirectTo 的功能 | |
switchTab | 對(duì)應(yīng) uni.switchTab 的功能 | |
reLaunch | 對(duì)應(yīng) uni.reLaunch 的功能 | 字節(jié)跳動(dòng)小程序與飛書小程序不支持 |
navigateBack | 對(duì)應(yīng) uni.navigateBack 的功能 | |
exit | 退出小程序，target="miniProgram"時(shí)生效 | 微信2.1.0+、百度2.5.2+、QQ1.4.7+ |
2、uni-app API 跳轉(zhuǎn)
uni.navigateTo({url: "/pages/animation-major/index",})使用 API 頁(yè)面跳轉(zhuǎn)方式有：
- uni.navigateTo： 保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用 navigateBack 可以返回到上一頁(yè)。
- uni.navigateBack：關(guān)閉當(dāng)前頁(yè)面，返回上一級(jí)或多級(jí)頁(yè)面。delta 屬性設(shè)置返回層級(jí)，大于頁(yè)面數(shù)時(shí)返回首頁(yè)。
- uni.redirectTo：關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。
- uni.reLaunch：關(guān)閉應(yīng)用內(nèi)所有頁(yè)面，打開應(yīng)用內(nèi)某個(gè)頁(yè)面。
- uni.switchTab：跳轉(zhuǎn)到 tabBar 頁(yè)面，關(guān)閉其他非 tabBar 頁(yè)面。
- uni.preloaPage：預(yù)加載頁(yè)面，是一種性能優(yōu)化技術(shù)，被預(yù)載的頁(yè)面，在打開時(shí)速度更快。
頁(yè)面棧
框架以棧的形式管理當(dāng)前所有頁(yè)面， 當(dāng)發(fā)生路由切換的時(shí)候，頁(yè)面棧的表現(xiàn)如下：
路由方式 | 頁(yè)面棧表現(xiàn) | 觸發(fā)時(shí)機(jī) |
初始化 | 新頁(yè)面入棧 | uni-app 打開的第一個(gè)頁(yè)面 |
打開新頁(yè)面 | 新頁(yè)面入棧 | 調(diào)用 API uni.navigateTo 、使用組件 <navigator open-type="navigate"/> |
頁(yè)面重定向 | 當(dāng)前頁(yè)面出棧，新頁(yè)面入棧 | 調(diào)用 API uni.redirectTo 、使用組件 <navigator open-type="redirectTo"/> |
頁(yè)面返回 | 頁(yè)面不斷出棧，直到目標(biāo)返回頁(yè) | 調(diào)用 API uni.navigateBack 、使用組件 <navigator open-type="navigateBack"/> 、用戶按左上角返回按鈕、安卓用戶點(diǎn)擊物理back按鍵 |
Tab 切換 | 頁(yè)面全部出棧，只留下新的 Tab 頁(yè)面 | 調(diào)用 API uni.switchTab 、使用組件 <navigator open-type="switchTab"/> 、用戶切換 Tab |
重加載 | 頁(yè)面全部出棧，只留下新的頁(yè)面 | 調(diào)用 API uni.reLaunch 、使用組件 <navigator open-type="reLaunch"/> |
頁(yè)面?zhèn)鲄?/h3>
方式1：onLoad 接收
// 跳轉(zhuǎn)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('接受上個(gè)頁(yè)面?zhèn)鞯闹?,parmes)})}}</script>方式2：setup語(yǔ)法糖接收
<script setup>import { onMounted, getCurrentInstance } from 'vue';onMounted(()=>{let options = getCurrentInstance()console.log("options--->",options.attrs);})</script>
onLoad 函數(shù)是監(jiān)聽頁(yè)面加載，接收的參數(shù)是頁(yè)面?zhèn)鬟f的數(shù)據(jù)，是一個(gè) object 類型。
看到這，相信很快就能上手 uni-app + vue3 項(xiàng)目路由嘍，也可以參考官網(wǎng)教程：
https://uniapp.dcloud.io/tutorial/page.html#%E8%B7%AF%E7%94%B1。
