## navigator
**屬性名 **
```
類型 默認值 說明 平臺支持
url String 應用內的跳轉鏈接,值為相對路徑或絕對路徑,如:"../first/first","/pages/first/first",注意不能加 .vue 后綴
open-type String navigate 跳轉方式
delta Number 當 open-type 為 'navigateBack' 時有效,表示回退的層數
hover-class String navigator-hover 指定點擊時的樣式類,當hover-class="none"時,沒有點擊態效果
hover-stop-propagation Boolean false 指定是否阻止本節點的祖先節點出現點擊態 微信小程序
hover-start-time Number 50 按住后多久出現點擊態,單位毫秒
hover-stay-time Number 600 手指松開后點擊態保留時間,單位毫秒
open-type 有效值:
```
##
## 值 說明 平臺支持
```
navigate 對應 uni.navigateTo 的功能
redirect 對應 uni.redirectTo 的功能
switchTab 對應 uni.switchTab 的功能
reLaunch 對應 uni.reLaunch 的功能 微信小程序
navigateBack 對應 uni.navigateBack 的功能 微信小程序
```
注:navigator-hover 默認為 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子節點背景色應為透明色。
示例:
```
<template>
<view>
<view class="page-body">
<view class="btn-area">
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳轉到新頁面</button>
</navigator>
<navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
<button type="default">在當前頁打開</button>
</navigator>
</view>
</view>
</view>
</template>
export default {
data() {
return {
title: 'navigator'
}
},
methods: {
}
}
```
頁面傳值及接收
index/index.vue
<template>
<view>
<view class="page-body">
<view class="btn-area">
<navigator url="./test?title=navigate" hover-class="navigator-hover">
<button type="default">跳轉到新頁面</button>
</navigator>
</view>
</view>
</view>
</template>
test.vue 接收參數
<script>
export default {
data:{},
onLoad:function(options){
console.log(options);
console.log(options.title);
}
}
</script>
- 第1講 : 創建項目、部署 VUE 、入口頁面布局
- 第2講,快速開始第一個項目
- 第3講 : uni-app 開發規范及目錄結構
- 第4講 : uni-app 頁面樣式與布局
- 第5講 : uni-app 配置文件 - pages.json
- 第6講 : 配置文件 - manifest.json
- 第7講 : uni-app 頁面生命周期
- 第8講 : uni-app 模板語法 - 數據綁定
- 第9講Class 與 Style 綁定 (動態菜單激活示例)
- 第10講 : uni-app 事件處理、事件綁定、事件傳參
- 第11講 : uni-app 組件 - 基礎組件
- 第12講 : uni-app 組件 - 表單組件
- 第13講 : uni-app 組件 - navigator(導航)及頁
- 第14講 : uni-app 組件 - 媒體組件
- 第15講 : uni-app 組件 - 地圖組件
- 第16講 : uni-app 接口 - 網絡請求
- 第17講 : uni-app 接口 - 從本地相冊選擇圖片或使
- 第18講 : uni-app 上傳(圖片上傳實戰)
- 第19講 : uni-app 接口 - 數據緩存
- 第20講 : uni-app 設備相關
- 第21講 : uni-app 交互反饋
- 第22講 : uni-app 設置導航條
- 第23講 : uni-app 導航(頁面流轉)
- 第24講 : uni-app 下拉刷新
- 第25講 : uni-app 上拉加載更多
- 第26講 : uni-app 第三方登錄(小程序篇)
- 第27講 : uni-app 登錄(h5+ app 篇)
- 第28講 : 自定義組件創建及使用