uniapp跳轉頁面詳解

一、uniapp跳轉頁面報錯

在uniapp開發過程中，可能會遇到頁面跳轉時出現報錯的情況。這種情況可能是因為路由配置出錯或頁面路徑不正確導致的。

首先，需要檢查uniapp的路由配置是否正確。在uniapp中，我們使用uni-navitagtion組件來進行頁面的跳轉。該組件有兩種配置方式：靜態配置和動態配置。在靜態配置中，所有頁面的跳轉關係都需要手動配置到路由表中。在動態配置中，跳轉的頁面路徑是通過參數傳遞的。在進行路由配置時，需要注意格式的正確性。示例如下：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    },
    {
      "path": "pages/about/about",
      "style": {}
    }
  ],
  "window": {
    "navigationBarTitleText": "uniapp demo"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#555",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "關於我們",
        "iconPath": "static/tabbar/about.png",
        "selectedIconPath": "static/tabbar/about-active.png"
      }
    ]
  }
}

其次，如果路由配置正確，檢查跳轉的頁面路徑是否正確，路徑大小寫和文件後綴名需要保持一致。如果都檢查無誤還是出現跳轉報錯，可以通過在跳轉時打印日誌進行排查。示例如下：

// 在跳轉頁面前添加以下代碼
console.log("跳轉路徑為：" + path);

uni.navigateTo({
  url: path
})

二、uniapp如何跳轉頁面和傳參

在uniapp中，我們可以使用uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch四種方式來進行頁面跳轉。其中，uni.navigateTo和uni.redirectTo可以傳遞參數，uni.switchTab和uni.reLaunch不支持傳遞參數，只能直接跳轉到目標頁面。

下面是使用uni.navigateTo進行頁面跳轉並傳遞參數的示例：

uni.navigateTo({
  url: '/pages/article/article?id=123&title=uni-app教程',
  success: function (res) {
    console.log('打開新頁面成功！');
  }
});

在跳轉時需要指定目標頁面的路徑，並在路徑後面添加參數。參數的格式為key=value，可以同時傳遞多個參數，參數之間使用&符號進行分割。在目標頁面可以通過uni.getStorageSync或uni.getStorage讀取傳遞過來的參數值。

三、uniapp跳轉頁面狀態

在uniapp中，頁面跳轉可以是同步的，也可以是異步的。異步跳轉可以通過success和fail回調函數進行處理，使用同步跳轉時不需要回調函數。示例如下：

// 同步跳轉
uni.navigateTo({
  url: '/pages/article/article',
  complete: function () {
    // 頁面跳轉完成後的回調函數
    console.log('頁面跳轉完成！');
  }
});

// 異步跳轉
uni.navigateTo({
  url: '/pages/article/article',
  success: function (res) {
    // 跳轉成功後的回調函數
    console.log('跳轉成功！');
  },
  fail: function (res) {
    // 跳轉失敗後的回調函數
    console.log('跳轉失敗！');
  }
});

四、uniapp跳轉頁面並且刷新

在uniapp中，可以通過監聽頁面生命周期函數onShow來實現頁面刷新。當頁面從後台切換到前台時，onShow函數會被調用，可以在該函數中實現頁面的業務邏輯。

下面是在頁面跳轉後刷新目標頁面的示例：

// 頁面A中的跳轉函數
goToPageB: function () {
  uni.navigateTo({
    url: '/pages/pageB/pageB',
    success: function () {
      // 刷新頁面B
      var pageB = getCurrentPages()[getCurrentPages().length - 1];
      pageB.onShow();
    }
  });
}

在跳轉時添加success回調函數，在回調函數中獲取當前頁面實例，調用onShow函數即可實現頁面刷新。

五、uniapp跳轉頁面傳參數

在uniapp中，可以通過在跳轉時傳遞參數來實現頁面之間的數據交互。在目標頁面可以通過uni.getStorageSync或uni.getStorage讀取傳遞過來的參數值，並在頁面中進行操作。

下面是在頁面之間傳遞數據的示例：

// 頁面A中的跳轉函數
goToPageB: function () {
  uni.navigateTo({
    url: '/pages/pageB/pageB?id=123&title=uni-app教程'
  });
}

// 頁面B中讀取參數
onLoad: function (options) {
  console.log(options.id);
  console.log(options.title);
}

在跳轉時需要指定目標頁面的路徑，並在路徑後面添加參數。在頁面B中可以通過options參數獲取傳遞過來的參數值。

六、uniapp跳轉頁面如何攜帶參數

在uniapp中，可以通過uni-setStorageSync或uni.setStorage來設置參數值，然後在跳轉時通過查詢字符串的方式將參數值傳遞到目標頁面。在目標頁面可以通過uni.getStorageSync或uni.getStorage讀取傳遞過來的參數值。

下面是在頁面間攜帶參數的示例：

// 在頁面A中設置參數值
uni.setStorageSync('key', 'value');

// 在跳轉時攜帶參數
uni.navigateTo({
  url: '/pages/pageB/pageB?key=' + uni.getStorageSync('key')
});

// 在頁面B中讀取參數
onLoad: function () {
  console.log(uni.getStorageSync('key'));
}

在頁面A中通過uni-setStorageSync或uni.setStorage設置參數值，然後在跳轉時通過查詢字符串的方式將參數值傳遞到目標頁面。在目標頁面可以通過uni.getStorageSync或uni.getStorage讀取傳遞過來的參數值。

七、uniapp跳轉頁面的方式

在uniapp中，可以使用四種方式進行頁面跳轉：uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch。

其中，uni.navigateTo和uni.redirectTo都是普通的頁面跳轉方式，可以在跳轉時攜帶參數。uni.navigateTo是非底部選項卡頁面跳轉方式，可以返回上一頁面；而uni.redirectTo是非底部選項卡頁面替換式跳轉方式，不能返回上一頁面。

uni.switchTab是底部選項卡頁面跳轉方式，不能攜帶參數，可以返回到底部選項卡頁面；uni.reLaunch是頁面重啟式跳轉方式，可以攜帶參數，但無法返回前面的頁面。

八、uniapp跳轉頁面傳對象

在uniapp中，可以通過uni-setStorageSync或uni.setStorage來設置對象參數值，然後在跳轉時通過查詢字符串的方式將參數值傳遞到目標頁面。

下面是在頁面間攜帶對象參數的示例：

// 在頁面A中設置參數值
var obj = {
  name: '張三',
  age: 18
};
uni.setStorageSync('obj', JSON.stringify(obj));

// 在跳轉時攜帶參數
uni.navigateTo({
  url: '/pages/pageB/pageB?key=' + uni.getStorageSync('obj')
});

// 在頁面B中讀取參數
onLoad: function () {
  console.log(JSON.parse(uni.getStorageSync('obj')));
}

在頁面A中通過uni-setStorageSync或uni.setStorage設置對象參數值，然後在跳轉時通過JSON.stringify將對象轉換成字符串，並通過查詢字符串的方式將參數值傳遞到目標頁面。在目標頁面可以通過JSON.parse和uni.getStorageSync或uni.getStorage讀取傳遞過來的參數值。