uniapp の一般的なルーティング API とページ ジャンプ API は何ですか?

Uniapp は、Vue.js に基づくクロスプラットフォーム アプリケーション開発フレームワークです。統一された構文仕様とカプセル化された API を通じて、ミニ プログラム、H5、アプリなどのマルチプラットフォーム アプリケーションの迅速な構築をサポートし、豊富なルーティングを提供します。アプリケーション間のジャンプやページ間のインタラクションを実現する Jump API。

Uniapp の一般的なルーティング API とページ ジャンプ API を詳しく紹介します:

ルーティング

ルーティングとは、アプリケーション間のジャンプ ルールを指します。Uniapp は、グローバルなルーティング設定メソッドを含むさまざまなルーティング設定メソッドを提供します。ルーティング設定、ページ固有設定、コンポーネントルーティング設定など。ルーティングにより、アプリケーション間の高速なジャンプやページ間のパラメータ転送を実現できます。

1. グローバル ルーティング構成

グローバル ルーティング構成には、アプリケーションのすべてのルーティング ルールが含まれており、main.js ファイルで構成されます。具体的な方法は次のとおりです:

import App from './App'

// 全局路由配置
const router = uni.createRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: () => import('@/pages/home/index.vue')
        },
        {
            path: '/category',
            name: 'category',
            component: () => import('@/pages/category/index.vue')
        },
        {
            path: '/goods/:id',
            name: 'goods',
            component: () => import('@/pages/goods/index.vue')
        },
        //...
    ]
})

App.mpType = 'app'
App.router = router
App.vue = new Vue({
    router,
    render: h => h(App)
}).$mount()

グローバル ルーティング設定では、複数のルーティング ルールを定義できます。各ルーティング ルールには、パス、名前、コンポーネントの 3 つの属性が含まれます。このうち、pathはルートのパスを表し、nameはルートの名前を表し、componentはルートに対応するコンポーネントを表します。

Uniapp では、uni.navigateTo、uni.switchTab、uni.reLaunch などの API を使用してルーティング ジャンプを実現できます。次に、これらの API の使用方法を詳しく紹介します。

2. ページ排他ルーティング構成

ページ排他ルーティング構成を使用すると、特定のページのルーティング ルールを定義し、ページ構成にルーティング ルールを記述することができます。

<template>
  <view class="container">
      <!-- ... -->
  </view>
</template>

<script>
export default {
  name: 'home',
  // 页面独享配置
  onUniNaviationBarTap(){
    uni.navigateTo({
      url:'/pages/category/index'
    })
  }
}
</script>

<style>
/* ... */
</style>

ページ排他構成では、複数のルーティング ルールを定義し、それらをイベントの形式でトリガーできます。これらのイベントには、onLoad、onShow、onUnload、onHide などが含まれます。

3. コンポーネントルーティング設定

コンポーネントルーティング設定では、コンポーネント間の配線ジャンプを実現し、コンポーネント内にルーティングルールを記述することができます。具体的な方法は次のとおりです:

<template>
  <view class="container" @click="goToGoodsDetail">
      <!-- ... -->
  </view>
</template>

<script>
export default {
  name: 'product-card',
  methods: {
    goToGoodsDetail() {
      uni.navigateTo({
        url: '/pages/goods/index?id=' + this.goodsId
      })
    },
  },
  props: {
    goodsId: {
      type: String,
      required: true,
    },
  },
}
</script>

<style>
/* ... */
</style>

コンポーネント内でルーティング ルールを定義し、uni.navigateTo をトリガーすることで、コンポーネント間のジャンプを実現できます。

ページ ジャンプ API

Uniapp は、navigateTo、redirectTo、switchTab、reLaunch などのさまざまなページ ジャンプ API を提供します。これらの API を通じて、アプリケーション間の高速なジャンプを実現できます。パラメータの受け渡しも可能です。ページの間。

1. navigateTo

navigateTo は、最も一般的に使用されるページ ジャンプ API の 1 つです。現在のページ上で新しいページを開くために使用されます。新しいページは返されます。 to through uni.navigateBack 現在のページ。

uni.navigateTo({
  url: '/pages/category/index'
})

navigateTo の url は、ジャンプ先のページ パスを表し、相対パスまたは絶対パスを指定できます。

2. redirectTo

redirectTo は、現在のページを閉じて新しいページを開くために使用されます。新しいページは、uni.navigateBack を通じて現在のページに戻ることはできません。

uni.redirectTo({
  url: '/pages/category/index'
})

3. switchTab

switchTab は、アプリケーションのタブ ページを開くために使用されます。ページはパラメーターを渡すことはできません。初期化操作は、タブ ページの onLoad を通じて実装できます。 。

uni.switchTab({
  url: '/pages/home/index'
})

4. reLaunch

reLaunch は、すべてのページを閉じて、新しいページを開くために使用されます。新しいページは、uni.navigateBack を通じて現在のページに戻ることができます。

uni.reLaunch({
  url: '/pages/login/index'
})

概要

この記事では、Uniapp の一般的なルーティング API とページ ジャンプ API について詳しく紹介します。アプリケーション開発において、ルーティングとページ ジャンプは非常に重要な部分です。柔軟な構成とこれらの API の使用により、アプリケーション間のジャンプやページ間のインタラクションを実現し、ユーザーに優れたエクスペリエンスと優れたサービスを提供します。

以上がuniapp の一般的なルーティング API とページ ジャンプ API は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。