微信小程序开发笔记(八)--路由跳转

官方传送门：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

1.navigate

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

用法：

<!--index/index.wxml-->
<navigator url="/test/test">跳转到新页面</navigator>

等价：

<!--index/index.wxml-->
<navigator bindtap="gotoText">跳转到新页面</navigator>

// index/index.js
gotoText: function (e) {
    wx.navigateTo({
      url: '/test/test'
    })
  },

2.redirect

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

用法：

<!--index/index.wxml-->
<navigator open-type="redirect" url="/test/test">跳转到新页面</navigator>

等价：

<!--index/index.wxml-->
<navigator bindtap="gotoText">跳转到新页面</navigator>

// index/index.js
gotoText: function (e) {
    wx.redirectTo({
      url: '/test/test'
    })
  },

3.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

用法：

<!--index/index.wxml-->
<navigator open-type="switchTab" url="/test/test">跳转到新的页面</navigator>

等价：

<!--index/index.wxml-->
<navigator bindtap="gotoText">跳转到新的页面</navigator>

// index/index.js
gotoText: function (e) {
    wx.switchTab({
      url: '/test/test'
    })
  },

4.reLaunch

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

用法：

<!--index/index.wxml-->
<navigator open-type="reLaunch" url="/test/test">跳转到新的页面</navigator>

等价：

<!--index/index.wxml-->
<navigator bindtap="gotoText">跳转到新的页面</navigator>

// index/index.js
gotoText: function (e) {
    wx.reLaunch({
      url: '/test/test'
    })
  },

5.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

用法：

<!--index/index.wxml-->
<navigator open-type="navigateBack" url="/test/test">返回上一页面或多级页面</navigator>

等价：

<!--index/index.wxml-->
<navigator bindtap="gotoText">返回上一页面或多级页面</navigator>

// index/index.js
gotoText: function (e) {
//返回的页面数，如果 delta 大于现有页面数，则返回到首页。
    wx.navigateBack({
      delta: 2
    })
  },

6.exit

退出小程序，target="miniProgram"时生效

用法：

<!--index/index.wxml-->

<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">退出小程序</navigator>

等价：

<!--index/index.wxml-->
<navigator bindtap="gotoText">退出小程序</navigator>

// index/index.js
gotoText: function (e) {
    wx.switchTab({
      url: '/test/test'
    })
  },

7.url传参

index:

<!--index/index.wxml-->
<navigator bindtap="gotoText">跳转到text页面</navigator>

// index/index.js
gotoText: function (e) {
    wx.navigateTo({
      url: '/test/test?title=liuxiaotao'
    })
  },

test：

<!--test/test.wxml-->
<view>{{title}}</view>

// test/test.js

　　/**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    this.setData({

      title: options.title

    })

  },

8.总结

wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

navigateTo,redirectTo只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。

调用页面路由带的参数可以在目标页面的onLoad中获取。