微信小程序页面导航

页面导航分为两种导航

1.声明式导航 

在页面中使用组件<navigator>，url属性是导航的地址

2.编程式导航

调用小程序的导航API，实现页面跳转

1.声明式导航

跳转到tabBar页面

<!-- 声明式导航 -->
<!-- open-type 跳转的方式 值为switchTab 跳转到tabBar页面 关闭所有非tabBar页面 -->
<navigator url="/pages/list/list" open-type="switchTab">跳转到tabbar</navigator>

跳转到非tabBar页面

<!-- 值为navigate 保留当前页面跳转到非tabBar页面 navigate默认值可以不写 -->
<navigator url="/pages/goods/goods" open-type="navigate">跳转到goods非tabbar</navigator>

后退导航

<!--
   navigateBack 关闭当前页面 返回上一级或者多级页面 delta返回的页面数
   如果只是返回到上一页面，可以省略delta="1"，因为默认值为1
   如果delta 大于现有的页面数 则返回到首页
   open-type  和 delta 必填
 -->
<navigator open-type="navigateBack" delta="1">返回</navigator>

传参

<!-- 
  1.参数和路径直接使用?分割
  2.参数名和参数直间使用=连接
  3.不同的参数用&分割
 -->
<navigator url="/pages/goods/goods?id=123&name='张三'" open-type="navigate">跳转</navigator>

2.编程式导航

跳转到abBar页面

<!-- 编程式导航 -->
<button bindtap="gotoList">点击跳转list</button>

js文件中

// 跳转tabBar list组件
  gotoList() {
    wx.switchTab({
      url: '/pages/list/list',
    })
  },

跳转到非tabBar页面

<button bindtap="gotoGoods">跳转goods</button>

js文件中

// 跳转非tabbar goods组件
  gotoGoods() {
    wx.navigateTo({
      url: '/pages/goods/goods',
    })
  },

后退导航

<button bindtap="goBack">后退tabbar</button>

js文件中

 // 返回上一级
  goBack() {
    wx.navigateBack({
      delta: 1,
    })
  },

传参

<button bindtap="gotoGoods">跳转goods</button>

//传递参数
gotoGoods() {
    wx.navigateTo({
      url: "/pages/goods/goods?id=123",
    })
  },

在onLoad中接收参数

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options); //{"id":123}
  },