路由配置
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;
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐