
如何實現微信小程序路由跳轉指定頁面?微信小程序路由跳轉,共有三種形式,頁面中使用navigator組件做頁面鏈接形式路由跳轉,js中可以使用wx.navigateTo--保留當前頁面,跳轉到應用內的某個頁面,wx.redirectTo--關閉當前頁面,跳轉到應用內的某個頁面 wx.navigateBack()--關閉當前頁面,回退前一頁面。
頁面鏈接。
| 屬性名 | 類型 | 默認值 | 說明 | 
|---|---|---|---|
| url | String | 應用內的跳轉鏈接 | |
| redirect | Boolean | false | 是否關閉當前頁面 | 
| hover-class | String | navigator-hover | 指定點擊時的樣式類,當hover-class="none"時,沒有點擊態效果 | 
注:navigator-hover默認為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 
示例代碼:
/** wxss **//** 修改默認的navigator點擊態 **/
.navigator-hover 
{    
color:blue;
}
/** 自定義其他點擊態樣式類 **/
.other-navigator-hover 
{    
color:red;
}跳轉到新頁面 在當前頁打開(關閉了當前頁面)
 {{title}}  點擊左上角返回回到之前頁面 {{title}}  點擊左上角返回回到上級頁面// redirect.js navigator.jsPage({  
onLoad: function(options) 
{    
this.setData
({      
title: options.title
 })
 }
})保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
OBJECT參數說明:
| 參數 | 類型 | 必填 | 說明 | 
|---|---|---|---|
| url | String | 是 | 需要跳轉的應用內頁面的路徑 | 
| success | Function | 否 | 接口調用成功的回調函數 | 
| fail | Function | 否 | 接口調用失敗的回調函數 | 
| complete | Function | 否 | 接口調用結束的回調函數(調用成功、失敗都會執行) | 
示例代碼:
wx.navigateTo({  url: 'test?id=1'})注意:為了不讓用戶在使用小程序時造成困擾,我們規定頁面路徑只能是五層,請盡量避免多層級的交互方式。
關閉當前頁面,跳轉到應用內的某個頁面。
OBJECT參數說明:
| 參數 | 類型 | 必填 | 說明 | 
|---|---|---|---|
| url | String | 是 | 需要跳轉的應用內頁面的路徑 | 
| success | Function | 否 | 接口調用成功的回調函數 | 
| fail | Function | 否 | 接口調用失敗的回調函數 | 
| complete | Function | 否 | 接口調用結束的回調函數(調用成功、失敗都會執行) | 
示例代碼:
wx.redirectTo({  url: 'test?id=1'})關閉當前頁面,回退前一頁面。