Taro:路由
Taro:路由
页面的配置是一般是存放在app.ts文件中,在react-hook中路由配置文件一般存放在app.config.ts中,
在pages:[]中进行配置,配置的目的是首页加载项;当修改完成后,请结束进程,重新启动项目
1.Taro.navigateTo: 是指跳转后,在浏览器端可以进行前进和后退的 相当于 $router.push
2. Taro.redirectTo:是指跳转后,在浏览器端不论前进还是后退都停留在当前页 相当于$router.replace
在vue中我会用到this.$router.params来获取路由,但是在Taro中使用此方法就会显示不好用并且会报错,报错的就是在你跳转的目标页面报错(reading params)
因此就会有了已下的解决方案,在目标页面使用 Taro.getCurrentInstance().router.params;使用此方法来接收其他页面在路由中传递过来的值
Taro:使用路由进行跳转的步骤:
1.在app.config.ts中的pages中进行页面的配置,否则页面将会无法进行显示
2.在跳转页我们进行一个点击事件来进行操作路由的跳转
当我们需要使用<Button></Button>的时候,我们还需要把Button在页面顶部的@taro/components中进行配置进去
3.在跳转页面进行跳转操作,react中点击事件是onClick={this.handle}
handle(){
Taro.navigateTo({
url:"目标页面的路径"
})
}
4.如果需要进行携带参数的时候,我们需要第三步进行改动既可以
handle(){
Taro.navigateTo({
url:"目标页面的路径?id=xxx&name=xxxx"
})
}
5.在目标页面中我们可以在componentWillMount(){}函数中进行接收参数
componentWillMount(){
let {id} = Taro.getCurrentInstance().router.params //使用此方法进行接收数据
//不能使用this.$router.params来接收数据,不然就会报错 (reading params)
}
注释:如果出现报错的情况(
* Move code with side effects to componentDidMount, and set initial state in the constructor. * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 18. x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
)请修改函数既可以