前端学习之路Taro——路由

路由配置文件——app.jsx

该文件在你的项目的根目录下的src

如何配置路由：

import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/redux'

import Index from './pages/index'

import configStore from './store'

import './app.less'

// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

const store = configStore()

class App extends Component {

  config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

其中可以看到config 中有一个pages 这个就是我们需要配置的路由

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

navigateTo: 最基本的跳转方式，可以返回上级页面。三端都支持的，小程序、H5、React Native。
redirectTo：不记录上集页面，直接跳转。三端都支持的，小程序、H5、React Native。
switchTab： Tab之间进行切换，这个要配合Taro的导航栏一起使用，三端都支持的，小程序、H5、React Native。
navigateBack: 返回上一级页面，这个在小程序中常使用，三端都支持的，小程序、H5、React Native。
relaunch：关闭所有额面，打开到应用内某个页面。三端都支持的，小程序、H5、React Native。
getCurrentPages:获取当前页面信息所用，这个H5是不支持的。（注意）

navigateTo跳转：

  const gotodetail = ()=>{
    Taro.navigateTo(
      {
        url:"/pages/detail/detail"
      }
    )
  }

全部代码：

import Taro, { useState } from "@tarojs/taro";
import { View, Button, Text } from "@tarojs/components";
import { connect } from "@tarojs/redux";

import { add, minus, asyncAdd } from "../../actions/counter";

import "./index.less";
import Top  from '../../component/top/top'
function Index() {
  const [username, setUserName] = useState("mingming");
  const gotodetail = ()=>{
    Taro.navigateTo(
      {
        url:"/pages/detail/detail"
      }
    )
  }
  return(
    <View>
      <Top props_username={username}></Top>
      <Text>
        {username}
      </Text>
      <Button onClick={gotodetail}>
        gotodetail
      </Button>
    </View>
  )
}
export default Index

redirectTo

跳转后不能回退

  const gotodetail = ()=>{
    Taro.redirectTo(
      {
        url:"/pages/detail/detail"
      }
    )
  }

全部代码：

import Taro, { useState } from "@tarojs/taro";
import { View, Button, Text } from "@tarojs/components";
import { connect } from "@tarojs/redux";

import { add, minus, asyncAdd } from "../../actions/counter";

import "./index.less";
import Top  from '../../component/top/top'
function Index() {
  const [username, setUserName] = useState("mingming");
  const gotodetail = ()=>{
    Taro.redirectTo(
      {
        url:"/pages/detail/detail"
      }
    )
  }
  return(
    <View>
      <Top props_username={username}></Top>
      <Text>
        {username}
      </Text>
      <Button onClick={gotodetail}>
        gotodetail
      </Button>
    </View>
  )
}
export default Index