有了页面之后就可以到/src/app.jsx下,然后在pages的数组里面加入代码。

pages: [
    'pages/blog/blog',
    'pages/index/index'
],

Taro提供了6个相关的导航API,我们可以使用这些API进行跳转,需要注意的是这些有些是小程序专用的。

  • navigateTo: 最基本的跳转方式,可以返回上级页面。三端都支持的,小程序、H5、React Native。

  • redirectTo:不记录上集页面,直接跳转。三端都支持的,小程序、H5、React Native。

  • switchTab: Tab之间进行切换,这个要配合Taro的导航栏一起使用,三端都支持的,小程序、H5、React Native。

  • navigateBack: 返回上一级页面,这个在小程序中常使用,三端都支持的,小程序、H5、React Native。

  • relaunch:关闭所有额面,打开到应用内某个页面。三端都支持的,小程序、H5、React Native。

  • getCurrentPages:获取当前页面信息所用,这个H5是不支持的。(注意)

    import Taro from '@tarojs/taro'
    import {View , Text ,Button} from '@tarojs/components'
    function Blog(){
        const gotoIndex=()=>{
            Taro.navigateTo({url:'/pages/index/index'})
        }
        return (
            <View>
                <Text>我的</Text>
                <Button onClick={gotoIndex}>去首页</Button>
            </View>
        )
    }
    export default Blog
    

以上就实现了Taro中路由的跳转。