目录

• 一、文件目录
• 二、实现效果
• 三、实现
• • 3.1 跳转页面api
  • 3.2 页面组件跳转
• 四、示例demo源码
• • 4.1 wxml
  • 4.2 wxss
  • 4.3 js

一、文件目录

二、实现效果

三、实现

点击test页面中的按钮，跳转至页面other；

3.1 跳转页面api

3.1.1 navigateTo

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈

wx.navigateTo({
  url: '../other/other'
})

3.1.2 redirectTo

关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
  url: 'pages/other/other'
})

3.1.3 switchTab

wx.switchTab({
  url: 'pages/other/other'
})

跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。

3.1.4 reLanch
关闭所有页面，打开到应用内的某个页面。

wx.reLanch({
  url: 'pages/other/other'
})

3.2 页面组件跳转

3.2.1 navigator组件

// navigator 组件默认的 open-type 为 navigate 
<navigator url="pages/other/other" hover-class="navigator-hover">跳转页面</navigator>


// redirect 对应 API 中的 wx.redirect 方法
<navigator url="pages/other/other" open-type="redirect" hover-class="other-navigator-hover">跳转页面</navigator>

// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="pages/other/other" open-type="switchTab" hover-class="other-navigator-hover">跳转页面</navigator>

// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="pages/other/other" open-type="redirect" hover-class="other-navigator-hover">跳转页面</navigator>

// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="pages/other/other" open-type="navigateBack" hover-class="other-navigator-hover">跳转页面</navigator>

四、示例demo源码

4.1 wxml

test.wxml

<!--pages/index/test.wxml-->
<view class="top">
<button type="primary" bindtap="goTo">跳转页面</button>
</view>

other.wxml

<!--pages/other/other.wxml-->
<text>跳转成功</text>

4.2 wxss

test.wxss

.top{
  display: flex;
  align-items: center;
  justify-content: center;
}

4.3 js

test.js

//获取应用实例
Page({
  goTo:function(){
    wx.navigateTo({
      url: '../other/other',
    })
  }
})