uni-app 路由與頁面跳轉

 

文章目錄

 

• 保留當前頁面，跳轉到應用內的某個頁面
• 關閉當前頁面，跳轉到應用內的某個頁面
• 關閉所有頁面，打開到應用內的某個頁面
• 跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
• 關閉當前頁面，返回上一頁面或多級頁面
• 窗口動畫

 

關鍵點

• 跳轉到 tabBar 頁面只能使用 switchTab 跳轉
• navigateTo, redirectTo 只能打開非 tabBar 頁面
• switchTab 只能打開 tabBar 頁面
• reLaunch 可以打開任意頁面
• 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar
• 不能在 App.vue 里面進行頁面跳轉

 

保留當前頁面，跳轉到應用內的某個頁面

/*
* uni.navigateTo(OBJECT):保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。
* url   需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，
* 參數鍵與參數值用=相連，不同參數用&分隔；如 'path?key=value&key2=value2'，path為下一個頁面的路徑，
* 下一個頁面的onLoad函數可得到傳遞的參數
* 
*/
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); //打印出上個頁面傳遞的參數。
    }
}

關閉當前頁面，跳轉到應用內的某個頁面

/*
*  uni.redirectTo(OBJECT)
* url  需要跳轉的應用內非 tabBar 的頁面的路徑，路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，
* 不同參數用&分隔；如 'path?key=value&key2=value2'
*/
uni.redirectTo({
    url: 'test?id=1'
});

關閉所有頁面，打開到應用內的某個頁面

/*
*  uni.reLaunch(OBJECT)
* url  需要跳轉的應用內頁面路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；
* 如 'path?key=value&key2=value2'，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數
*/
uni.reLaunch({
    url: 'test?id=1'
});
export default {
    onLoad: function (option) {
        console.log(option.id);
    }
}

跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面

/*
*  url 需要跳轉的 tabBar 頁面的路徑（需在 pages.json 的 tabBar 字段定義的頁面），路徑后不能帶參數
*/

//pages.json
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

//other.vue
uni.switchTab({
    url: '/pages/index/index'
});

關閉當前頁面，返回上一頁面或多級頁面

/*
* uni.navigateBack(OBJECT)  : 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層
*  delta 返回的頁面數，如果 delta 大於現有頁面數，則返回到首頁。
*/
// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
uni.navigateTo({
    url: 'B?id=1'
});

// 此處是B頁面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C頁面內 navigateBack，將返回A頁面
uni.navigateBack({
    delta: 2
});

窗口動畫

窗口的顯示/關閉動畫效果，支持在 API、組件、pages.json 中配置，優先級為：API = 組件 > pages.json

/*
* API
* 有效的路由 API
* navigateTo
* navigateBack
*/
uni.navigateTo({
    url: '../test/test',
    animationType: 'pop-in',
    animationDuration: 200
});
uni.navigateBack({
    delta: 1,
    animationType: 'pop-out',
    animationDuration: 200
});

/*
* 組件
* open-type 有效值
* navigateTo
* navigateBack
*/
<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

/*
* pages.json
* pages.json 中配置的是窗口顯示的動畫
*/
"style": {
    "app-plus": {
        "animationType": "fade-in",
        "animationDuration": 300
    }
}

 

 

摘自：https://blog.csdn.net/yzp0112/article/details/98031282