uni-app のナビゲーション ルーティングとページ ジャンプの使用について
HTML の
a
タグ と同様、
1. ナビゲーションページジャンプ
1.属性の説明
| 属性名 | タイプ | デフォルト値 | 説明する | 知らせ | プラットフォームの違い |
|---|---|---|---|---|---|
| URL | 弦 | アプリケーション内でジャンプします。値は、「…/login/login」または「/pages/login/login」などの絶対パスまたは相対パスです。 | サフィックスを追加することはできません.vue。追加しない場合、ジャンプは成功しません。 |
||
| オープンタイプ | 弦 | ナビゲートする | ジャンプ方法 | ||
| デルタ | 番号 | 1 | open-type が「navigateBack」の場合に有効で、ロールバックするレイヤーの数を示します。 | ||
| ホバークラス | 弦 | ナビゲーターホバー | クリック時のスタイルクラスを指定します。hover-class="none" が設定されている場合、クリック効果はありません。 |
2.open型の有効値（よく使われる）
| 価値 | 説明する | 説明する | プラットフォームの違いについて説明 |
|---|---|---|---|
| ナビゲートする | uni.navigateToの機能に対応 | ページへジャンプ | |
| リダイレクト | uni.redirectToの対応関数 | 現在のページで開く | |
| スイッチタブ | uni.switchTabの機能に相当 | タブページへジャンプ | |
| 再起動 | uni.reLaunchの機能に対応 | ByteDance ミニ プログラムと Feishu ミニ プログラムはサポートされていません | |
| ナビゲート戻る | uni.navigateBackの機能に相当 |
3. URLの長さ制限について（解決策：ページ通信、グローバル変数、encodeURIComponent）
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// navigate.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}
3.注意:
-
ジャンプ
tabbarページ、設定する必要がありますopen-type="switchTab" -
navigator-hoverデフォルトでは{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}、<navigator>子ノードの背景色は透明である必要があります。 -
navigator-open-type属性が対応する値を使用する場合、対応する値の関数が高于対応します跳转路径。 -
app-nvueこのプラットフォームは、純粋な nvue プロジェクト (render为native)によってのみサポートされます<navigator>。レンダリングがネイティブではない場合、nvue はナビゲーター コンポーネントをサポートしていないため、APIジャンプを使用してください。 -
app の下でアプリケーションを終了するには、Android プラットフォームで plus.runtime.quit を使用できます。iOS にはアプリを終了するという概念がありません。
-
uLinknavigator组件はい、コンポーネント增强版にはスタイルの下線が付いています。機能的には、オンライン Web ページを開くこと、他のアプリのスキーマ、mailto を介した電子メールの送信、および Tel を介した通話をサポートします。 -
Vue3 プロジェクトでは SSR が必要なため、H5 エンドは外側のレイヤーに a タグをネストします。
2. ルートジャンプ（プログラムジャンプ）
1.ナビゲート
現在のページを保持し、アプリケーション内のページにジャンプし、それを使用してuni.navigateBack元のページに戻ります。
url渡されたパラメータはonLoadライフサイクル中に受信されます。
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
onLoad: function (option) {
//option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
url: 'pages/test?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', {
data: 'data from starter page' })
}
})
// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('acceptDataFromOpenedPage', {
data: 'data from test page'});
eventChannel.emit('someEvent', {
data: 'data from test page for someEvent'});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
2. 新しいページにリダイレクトします (redirectTo)
現在のページを閉じて、アプリ内のページにジャンプします。
<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
<script>
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
</script>
3. tabBar ページにジャンプします (switchTab)
注意:
navigateTo, redirectToページのみ非 tabBar を開くことができます。
switchTab ページのみ tabBarを開くことができます。
reLaunch ページを開くことができます任意。
ページの下部にある はページによって決定されます。つまり、ページtabBarとして定義されている限り、それは下部になります。ではページジャンプはできません。その後、ページ スタックが消え、この時点では戻ることはできません。戻る必要がある場合は、ブラウザの他の履歴レコードへのナビゲーションを使用できます。 tabBartabBar App.vue
H5端页面刷新navigateBackhistory.back()