Taro学习笔记_路由配置、传参、跳转
·
路由配置
src/app.config.js下的pages属性进行设置
谁在第一项打开的页面就在哪里
window属性是设置小程序一些样式的
使用 taro create xxx 可以快速在pages下创建页面
跳转API
navigateTo 页面跳转,可以返回
redirectTo 不记录上一页跳转
switchTab Tab之间切换,配合Taro的导航栏一起使用
navigateBack 返回上一页
relaunch 关闭所有页面,打开一个页面
getCurrentPages 获得当前页面的一些配置
先执行taro create index2
此时pages下会出现一个index2目录
对src/app.config.js下的pages属性进行设置
pages: [
'pages/index2/index',
'pages/index/index'
],
文件位置index2/index.jsx
import { useState } from 'react'
// Taro可以使用一些api
import Taro from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import './index.less'
export default function Index2() {
const [ title2, setTitle2 ] = useState('title2');
const go2Index = () => {
// 跳转api之一
Taro.navigateTo({
// 传参
url: '/pages/index/index?title3=' + title2 + '&other=oo'
})
}
const go2Index_2 = () => {
Taro.redirectTo({
url: '/pages/index/index'
})
}
return (
<View>
<Text>页面2</Text>
<Button onClick={go2Index}>去index页面</Button>
<Button onClick={go2Index_2}>去index页面,不能返回上一级页面</Button>
</View>
)
}
文件位置index/index.jsx
import { useState, useEffect } from 'react'
// getCurrentInstance获取router相关参数
import { getCurrentInstance } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
function Index() {
const [ title, setTitle ] = useState('');
useEffect(()=>{
// console.log(getCurrentInstance().router.params)
// 获取传递的参数,并设置
setTitle(getCurrentInstance().router.params.title3);
}, [])
return (
<View>
<View>{ title }</View>
</View>
)
}
export default Index;
更多推荐



所有评论(0)