微信小程序 | 08.路由跳转

1.章节概述

• <navigateTo>实现跳转更方便，不用考虑元素堆叠问题，优先选择
• 在路由界面js的onLoad函数中接收参数
• 若跳转方式为switchTab，同时还要传参，则通过wx.switchTab( )实现
• switchTab传参借助本地缓存来实现

2.章节准备

在讲述本章节内容前，先进行一些准备：

• 创建"1"、“2”、"3"三个页面，这三个页面都是tabBar页面
• 创建"a"、“b”、"c"三个页面，这三个页面不是tarBar页面

3.<navigator>跳转

3.1.基本用法

<navigator>是较为推荐的路由跳转标签，相当于a标签。基本用法如下：

<navigator url="/pages/a/a">
	<view>...</view>
</navigator>

<navigator>标签的内容中可以是任意标签，不设置open-type属性(默认值为navigate)的话，只能跳转到非tarBar界面

3.2.进阶用法

<navigator>中还可以添加其他属性，参考官方文档<navigator>

常用属性	说明	接收参数
url	跳转链接	String
target	从哪里开始发生跳转，默认值self	self/miniProgram
open-type	跳转方式，默认值navigate	详见下表

openType的有效值如下：

下面演示将open-type设置为switchTab后，跳转到tarBar界面

3.3.路由传参

单纯通过<navigator>实现的话，唯有open-type为navigate时才能实现传参。

如果open-type为switchTab，<navigator>便无法实现，必须在js中调用路由函数才能实现。换言之，路由跳转到tarBar界面并传参，必须通过js实现

默认跳转方式(navigate)下，参数直接拼接在url上就能传递

1. 在<navigator>的url后拼接参数

   

2. 在对应页面(b)的js文件中，定义onLoad函数，通过options获取参数

   

4.js中调用路由函数跳转

参考文章：微信小程序（一）[路由页面跳转]

• wx.navigateTo相当于open-type="navigate"，只能跳转到非tarBar页面
• wx.switchTab相当于open-type="switchTab"，只能跳转到tarBar页面

4.1.wx.navigateTo( )

1. wxml中，为需要实现点击跳转的元素添加bindtap:函数名

   

2. 在js中定义自定义函数，并在其中调用路由函数wx.navigateTo( )，可以传参。

4.2.wx.switchTab( )

上文提到，如果希望跳转到tarBar界面并传参，必须通过js函数实现。

实现思路为：点击时将参数放入缓存，随后在跳转页面的onLoad中取出参数

1. wxml中，为需要实现点击跳转的元素添加bindtap:函数名，同时还可以添加data-xxx="yyy"将参数 xxx : yyy加入到事件源对象e中

   

2. 本页面的js中，定义switchTab1(e)。先输出事件源对象e寻找参数

   

   易错：通过data-xxx="yyy"传入的参数名均为小写

   

3. 从上图找到参数位置为e.currentTarget.dataset.usersex，将其存入缓存

   

4. 调用wx.switchTab跳转到tarBar页面

   

5. 在tarBar页面"1"的js中，找到onLoad函数，在其中取出缓存中的值

   

4.3.可能出现的情况：点击不触发函数

有时点击有bindtap属性的元素，并不会触发函数。

原因是在这个元素的表面有其他元素的阻挡，导致用户没能点击到目标元素。

对此，解决的方案是：设置目标元素的wxss样式，提高其z-index值：