uniapp組件裡跳轉路徑不同怎麼辦

隨著行動互聯網的快速發展，行動應用開發逐漸成為了開發者優先考慮的領域之一。相對而言，現在的應用程式不僅要確保美觀、流暢，還要有更好的使用者體驗。因此，開發者也花費更多的時間在顏色、動畫、介面風格等細節上，並喜歡使用嵌套路由的方式來管理和呼叫。

近期使用 uniapp 開發行動應用程式時，我遇到了一個元件裡跳轉路徑不同的問題，希望在這裡和大家分享一下解決方法。

問題描述

我在uniapp 中使用了uni-list 元件，在清單中展示了多個內容，在點擊某個內容時需要進入到具體的詳情頁面。可以透過navigateTo 進行跳轉，跳轉邏輯如下：

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

其中detail 頁面是在pages 資料夾下已經建立了的。

但是當我透過這種方式跳轉時，發現無論在哪個清單頁面，跳轉後的detail 頁面所在的url 路徑都是/pages/detail/ detail?id=。這樣的話，在使用 uni.showModal 返回上一頁時，無法正確地回到先前的清單頁。

原因分析

經過分析，這是由於我在App.vue 資料夾中使用了uni-simple-router 進行路由管理，需要對它進行設定。具體是在 config 資料夾下的 router.js 中進行設定。在這裡，同樣需要使用 navigateTo 進行跳轉，但需要注意的是，它的路徑設定方法和普通的路徑設定是不同的。

解決方法

可透過以下兩種方法來解決這個問題：

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 中，需要加入以下方法：

methods: {
  redirectToDetail(id) {
    uni.$router.push({
      path: '/pages/detail/detail?id=' + id
    });
  }
}

這裡呼叫了$router.push方法，path 屬性中需要填寫完整的路徑，包括資料夾名稱、檔案名稱和參數。透過這種方式跳轉後，每個頁面的路徑都會不同，可以正確地回到上一頁。

---

總之，無論是直接使用uni.navigateTo 或使用uni-simple-router，在跳轉時都需要注意路徑的設定方式，以便於正確地跳到需要展示的頁面，以及返回到先前的頁面。對於問題的分析和解決，也能更幫助開發者了解路由的使用和配置。

以上是uniapp組件裡跳轉路徑不同怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！