Taro路由配置

Taro中的路由设置跟React是不同的，它是通过app.jsx中的pages来配置的，并且谁配置在第一个数组位置，谁就是默认打开的首页。

新建一个页面

我们先新建一个页面，这个在前面的课程已经讲过，但是为了练习，大家最好还是手写这些代码。

在/src/pages/文件夹下，建立一个/blog文件夹，在文件夹下面建立一个blog.jsx文件，写入下面的代码:

import {View , Text} from '@tarojs/components'
function Blog(){
    return (
        <View>
            <Text>Blog Page</Text>
        </View>
    )
}
export default Blog

这样一个页面就建立好了，当然这个页面非常的简单，这些都无所谓，我们要学习的是路由。

配置路由

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

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

这里需要注意一点，就是你不需要用import引入Blog页面，这个Taro为我们自动做好了。修改完成后，可以到浏览器中看一下，可以看到默认页面已经变成了Blog页面了。

页面间的跳转

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是不支持的。（注意）

做个Demo，我们从Blog页面，跳转到Index页面，我们的程序如何来编写。
使用跳转需要使用Taro组件，所以先用import进行引入，然后再引入一个组件。

import Taro from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'

然后编写跳转方法，这里我们直接在function中进行声明.

const gotoIndex=()=>{
    Taro.navigateTo({url:'/pages/index/index'})
}

有了这个方法后，再编写一个按钮，然后再onClick事件中触发gotoIndex方法就可以了。

<Button onClick={gotoIndex}>我要去Index页面</Button>

为了方便你学习这里给出blog.jsx的全部代码。

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>Blog Page</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
        </View>
    )
}
export default Blog

这样我们就实现了Taro中路由的跳转。这节课我们也先到这里，下节课我们讲一下跳转时如何携带参数，然后目标页面如何接收参数。