uniapp コンポーネントのジャンプ パスが異なる場合はどうすればよいですか?

モバイル インターネットの急速な発展に伴い、モバイル アプリケーション開発は開発者にとって徐々に優先分野の 1 つになってきました。比較的に言うと、今日のアプリケーションは美しくスムーズであるだけでなく、より優れたユーザー エクスペリエンスも必要とされています。したがって、開発者は色、アニメーション、インターフェイス スタイルなどの詳細にさらに多くの時間を費やし、管理と呼び出しにネストされたルーティングを使用することを好みます。

最近、uniapp を使用してモバイル アプリケーションを開発していたときに、コンポーネント内の異なるジャンプ パスに関する問題が発生しました。ここで解決策を共有したいと思います。

問題の説明

uniapp の uni-list コンポーネントを使用して、リストに複数のコンテンツを表示します。特定のコンテンツをクリックするときに、特定のコンテンツを入力する必要があります。詳細ページ。 navigateTo を介してジャンプできます。ジャンプ ロジックは次のとおりです:

uni.navigateTo({
  url: '/pages/detail/detail?id=' + id
});

ここで、detail ページが pages フォルダーの下に作成されています。 。

しかし、この方法でジャンプすると、どのリスト ページにいても、ジャンプ後の detail ページの URL パスは /pages/detail であることがわかります。 /詳細?id=。この場合、uni.showModalを使用して前のページに戻ると、前のリストページに正しく戻ることができません。

原因分析

分析の結果、ルーティング管理に App.vue フォルダー内の uni-simple-router を使用したためです。を設定する必要があります。具体的には、config フォルダー内の router.js に設定されます。ここでもnavigateToを使ってジャンプする必要がありますが、そのパス設定方法が通常のパス設定とは異なるので注意が必要です。

解決策

この問題は、次の 2 つの方法で解決できます:

1. uni.navigateTo

これを直接使用します。この方法は比較的単純で、list コンポーネントに bindtap または @click イベントを追加するだけです:

<uni-list-item
  title="跳转详情页"
  arrow
  @click="redirectToDetail(item.id)">
</uni-list-item>

を実行してから、ジャンプを追加します。 methods のロジック:

methods: {
  redirectToDetail(id) {
    uni.navigateTo({
      url: '/pages/detail/detail?id=' + id
    });
  }
}

このようにして、各ページで redirectToDetail メソッドが呼び出され、特定のページにジャンプします。

2. uni-simple-routerを使用します

このメソッドを使用するための前提条件は、App.vue##ですでに使用していることです #uni-simple-router はルーティング管理を実行し、config で routes を設定しました。

list

コンポーネントの methods に、次のメソッドを追加する必要があります: <pre class="brush:php;toolbar:false">methods: {   redirectToDetail(id) {     uni.$router.push({       path: '/pages/detail/detail?id=' + id     });   } }</pre>

$router.push

ここではメソッドと呼ばれます。パス属性には、フォルダー名、ファイル名、パラメーターを含む完全なパスを入力する必要があります。このようにジャンプすると、各ページのパスが異なり、正しく前のページに戻ることができます。

つまり、

---

uni.navigateTo

を直接使用するか、uni-simple-router を使用するかにかかわらず、パスの設定方法に注意する必要があります。ジャンプ時 表示したいページに正しくジャンプし、前のページに戻るため。問題の分析と解決は、開発者がルーティングの使用と構成をよりよく理解するのにも役立ちます。

以上がuniapp コンポーネントのジャンプ パスが異なる場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。