微信小程序导航组件 navigator使用

一、微信小程序导航组件 navigator使用

//pages/index/index
<navigator url = '/pages/demo/index'>跳转到demo页面</navigator>
<navigator url = '/pages/my/index'>跳转到tabBar页面</navigator>
<navigator url = '/pages/log/index' open-type="redirect">redirect替换demo页面</navigator>
<navigator url = '/pages/my/index' open-type="switchTab">跳转到tabBar页面</navigator>
<navigator url = '/pages/demo/index' open-type="reLaunch">reLaunch到demo页面</navigator>
1
2
3
4
5
6

使用注意事项及区别：
正常跳转不会跳转到tabBar页面，只有使用switchTab才能跳转到tabBar相关页面。
redirect会覆盖路由历史记录中的最后一个页面–历史记录中是 index log
reLaunch会覆盖之前所有的历史记录，只留下最后跳转到的页面–demo
switchTab 跳转到 tabBar 页面，并关闭其他所有非tabBar 页面

js中实现路由跳转
1.wx.navigateTo
跳转到一个新的页面，会新增一种历史记录

// /pages/router/index.js
Page({
  // 普通的跳转
  navigateTo() {
    wx.navigateTo({
      url: '/pages/logs/logs?name=小刚&age=19',
      success() {}
    });
  },
})

1
2
3
4
5
6
7
8
9
10
11

2.wx.redirectTo

// /pages/router/index.js
Page({
  // 和 navigateTo 很类似，区别在于不会新增历史记录
  redirectTo() {
    wx.redirectTo({
      url: '/pages/logs/logs?name=小刚&age=19',
    });
  },
});

1
2
3
4
5
6
7
8
9
10

3.wx.navigateBack
返回页面，参数 delta 可以指定返回前几个页面。
结合getCurrrenPages() 获取页面栈 ，确定要回退的步数。

// /pages/router/index.js
Page({
  // 返回页面
  navigateBack() {
    wx.navigateBack({
      // 回退多少步
      delta: 0,
    });
  },
});


1
2
3
4
5
6
7
8
9
10
11
12

二、路由跳转页面传参&接收参数

方式一：url拼接参数

<navigator url = '/pages/demo/index?name=小明&age=18'>跳转到demo页面</navigator>
//在onLoad方法中接收参数
onLoad({name,age){
	
}
1
2
3
4
5

方法二：
在点击

<van-cell title="哼唧家园" mark:point="哼唧家园" bind:tap="getBuilding" is-link />
//接收参数
getBuilding(ev){
	console.log(ev.mark.point)
}
1
2
3
4
5