taro router

taro router

https://nervjs.github.io/taro/docs/router.html

bug

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

import {
  AtTabBar,
  AtButton,
  AtFloatLayout,
} from 'taro-ui'

const log = console.log;

const tabList = [
  {
    title: 'Home',
    text: 8,
  },
  {
    title: 'Modal',
    text: 7,
    // dot: true,
  },
  {
    title: '通讯录',
    dot: true,
  },
];

export default class Index extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
      isOpened: false,
    }
  }
  handleClick (value) {
    log(`tab index`, value)
    this.setState({
      current: value,
    });
    switch (value) {
      case 0:
        Taro.navigateTo({
          url: '/pages/home/index?id=1&type=test',
        })
        break;
      case 1:
        Taro.navigateTo({
          url: '/pages/modal/index?id=1&type=test',
        })
        break;
      default:
        break;
    }
  }
  handleClose () {
    this.setState({
      isOpened: false,
    })
  }
  handleOpen () {
    this.setState({
      isOpened: true,
    })
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    const {
      current,
      isOpened,
    } = this.state;
    return (
      <View className='index'>
        <AtTabBar
          tabList={tabList}
          onClick={this.handleClick.bind(this)}
          current={current}
        />
        <AtButton
          onClick={this.handleOpen.bind(this)}
          type='primary'>
          modal 按钮
        </AtButton>
        <AtFloatLayout
          title="这是个标题"
          isOpened={isOpened}
          onClose={this.handleClose.bind(this)}>
          这是内容区 随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
          随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写
        </AtFloatLayout>
      </View>
    )
  }
}

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

import {
  AtButton,
} from 'taro-ui'

const log = console.log;

export default class Home extends Component {
  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
      isOpened: false,
    }
  }
  gotoIndex () {
    Taro.navigateTo({
      url: '/pages/index/index',
      // url: '/pages/index',
    })
  }

  componentWillMount () { }

  componentDidMount () {
    log(`this.$router.params`, this.$router.params)
    // 输出 { id: 2, type: 'test' }
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='home'>
        <Text>home page</Text>
        <AtButton
          onClick={this.gotoIndex.bind(this)}
          type='primary'>
          返回
        </AtButton>
      </View>
    )
  }
}

---