Taro路由 - Kaiqisan
大家好，都吃晚饭了吗？我是Kaiqisan,是一个已经走出社恐的一般生徒
这篇文章统一讲讲taro中路由的使用方法
这个内容官网已经完完全全地写了，也可以麻烦再点点下面的链接去官网康康，我也只是简单地为了学习而记下此篇博客。 友情链接 - Taro路由
路由跳转
前提准备：先把该导的包导好
import Taro from '@tarojs/taro'
- 第一个跳转页面的方式，在原来页面的基础上打开新的页面并入栈，可以通过小程序左上角的返回键（或者返回指令）使当然页面出栈，并返回到上一个页面。
PS: 在使用React书写代码的时候，使用这个方法之后原先的页面会执行componentDidhide生命周期函数
// 跳转到目的页面，打开新页面
Taro.navigateTo({
url: '/pages/page/path/name',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function (res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
- 第二个跳转页面的方式，虽然都是跳转页面，但和上面的跳转方式的区别就是通过这个方法跳转到的页面无法入栈，也无法通过返回键（或者返回指令）来返回到之前的页面
PS: 在使用React书写代码的时候，使用这个方法之后原先的页面会执行componentWillUnmount生命周期函数
// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
url: '/pages/page/path/name'
})
- 第三个跳转方式，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
Taro.switchTab({
url: '/index'
})
- 第四个跳转方式，清除栈中所有的页面，关闭所有页面，打开到应用内的某个页面,一般用于注册页面，切换账号
PS: 在使用React书写代码的时候，使用这个方法之后原先的页面会执行componentWillUnmount生命周期函数
Taro.reLaunch({
url: 'test?id=1'
})
- 第五种跳转方式， 返回上一个页面，这个效果等同于物理返回键和小程序左上角的返回键。
Taro.navigateBack()
Taro.navigateBack({
delta: 2 // 这个参数代表返回的页数，如果返回到已经没有页面可返回了就会回到最初的主页
})
PS：以上所有的方法都是异步函数，可以后接回调函数，详细可见 taro-路由
路由传参
方法较为直接
Taro.navigateTo({
url: `/pages/menu/index?id=10`,
})
多个参数
Taro.navigateTo({
url: `/pages/menu/index?id=10&name=kaiqisan`,
})
路由参数查询
这里非常值得注意，因为在不同版本的Taro中这个方法是不同的
- Taro 1.x Taro 2.x
componentWillMount () {
console.log(this.$router.params)
}
- Taro 3.x
前提准备
import Taro ,{ getCurrentInstance } from '@tarojs/taro'
代码
componentDidMount () {
console.log(getCurrentInstance().router.params) // 输出 { id: 2, type: 'test' }
}
getCurrentInstance本意为获取当前页面的实例，下图为getCurrentInstance方法获取的所有信息
app里面包含所有页面路由和window配置以及所有页面通用的注册事件
page里面包含当前页面配置信息以及当前页面的已注册事件
router里面包含了所有的路由信息
注意网上教程使用的Taro版本，一切按照官网上面的来
总结
没有总结，网上教程也是图一乐，最重要的还是自己看官网！