关于微信开发小程序如何实现页面导航

关于微信开发小程序如何实现页面导航

navigator的使用

navigator是页面链接组件，相当于Html标签集中的a标签。当需要从一个页面跳转到另一个页面时，使用该组件。navigator组件根据open-type属性不同，分别对应于5个小程序导航API：

1、当open-type为navigate，相当于wx.navigateTo

2、当open-type为redirect，相当于wx.redirect

3、当open-type为switchTab，相当于wx.switchTab

4、当open-type为reLaunch，相当于wx.reLaunch

5、当open-type为navigateBack，相当于wx.navigateBack

代码如下：

<view class="weui-btn-area">
  <navigator url="navigator?title=navigate" open-type="navigate" 
hover-class="navigator-hover">
    <button type="default">navigate:新窗口打开</button>
  </navigator>
  <navigator url="navigator?title=redirect" open-type="redirect" 
hover-class="navigator-hover">
    <button type="default">redirect:在当前页打开</button>
  </navigator>
  <navigator url="navigator" open-type="switchTab" 
hover-class="navigator-hover">
    <button type="default">switchTab:切换tab</button>
  </navigator>
  <navigator url="navigator?title=reLaunch" open-type="reLaunch" 
hover-class="navigator-hover">
    <button type="default">reLaunch:重启打开</button>
  </navigator>
  <navigator delta="1" open-type="navigateBack">
    <button type="default">navigateBack:返回页面</button>
  </navigator>
</view>
...
.navigator-hover button{
  background-color: #DEDEDE;
}