【Taro】Router&静态资源

在 Taro 中，路由功能是默认自带的。不需进行要额外的配置
这里相当于通过小程序的配置适配小程序与 H5 的路由问题
Taro 默认根据配置路径生成 Route
我们只需要根据入口文件的 config 配置中指定 pages，然后代码中通过 Taro 提供的 API 来跳转目的页面

路由配置

文件 app.js 中的 config，添加页面（把相关文件路径填入），修改首页（修改顺序放置第一）：


config = {
   pages: [
     'pages/test/index',
     'pages/index/index'
   ],
 }

跳转路由

navigateTo又返回键，redirectTo没有，地址记得先写/，再写路径。


// 跳转到目的页面，打开新页面（在小程序中相当于打开了一个新的webview）,与react中router.push 的一致
Taro.navigateTo({url: '/pages/index/index'})

// 跳转到目的页面，在当前页面打开，没有返回上一页面
Taro.redirectTo({url: '/pages/index/index'})

路由传参数

可以直接在跳转的 url 后面添加字符串参数进行传参， id=1&type=test,例如
Taro.navigateTo({url: '/pages/index/index?id=1&type=test'})，在跳转页面的componentWillMount可以用 this.$router.params 接收相关参数

静态资源引用

1、在 Taro 中可以像 webpack 那样自由引用静态资源，而且不需要安装任何的 loader，例：像 react 要安装sass-loader、less-loader、js-loader等
2、引用样式文件，（导入样式文件时，该样式如果要 px 去设置尺寸，记得要 ‘PX’ 要大写，小写会被转化 rem）
3、可以直接通过 ES6 的 import 语法来引用样式文件，例如：图片（小程序中的图片不能能直接在代码中请求，必须require或import包裹，再赋值给图片）

// utils.js 文件
export const fetchListData = () => {
  console.log('fetchListData')
}
export const fetchUserData = () => {
  console.log('fetchUserData')
}


// test.js 文件 页面
import { View, Text, Button, Image } from '@tarojs/components'
import { fetchListData, fetchUserData } from '../../tool/utils'
import Img from '../../pubilc/img/demo.png'
...
export default class Index extends Component {
  ...
  componentWillMount () { 
    fetchListData()
    fetchUserData()
  }
  ···
  render () {
    return (
      <View className='index'>
        <Text>测试</Text>
        <Image src={Img} />
        <Image src={require('../../pubilc/img/demo.png')} />
      </View>
    )
  }
  ···
}

赏

支付宝打赏

微信打赏

欣赏此文，打赏一下

路由配置

跳转路由

相关API支持度

路由传参数

静态资源引用

标签

参与社区