在 Taro 中,路由功能是默认自带的。不需进行要额外的配置
这里相当于通过小程序的配置适配小程序与 H5 的路由问题
Taro 默认根据配置路径生成 Route
我们只需要根据入口文件的 config 配置中指定 pages,然后代码中通过 Taro 提供的 API 来跳转目的页面
路由配置
文件 app.js 中的 config,添加页面(把相关文件路径填入),修改首页(修改顺序 放置 第一):
1 2 3 4 5 6 7
| config = { pages: [ 'pages/test/index', 'pages/index/index' ], }
|
跳转路由
navigateTo又返回键,redirectTo没有,地址记得先写/,再写路径。
1 2 3 4 5 6
|
Taro.navigateTo({url: '/pages/index/index'})
Taro.redirectTo({url: '/pages/index/index'})
|
相关API支持度
路由传参数
可以直接在跳转的 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包裹,再赋值给图片)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| export const fetchListData = () => { console.log('fetchListData') } export const fetchUserData = () => { console.log('fetchUserData') }
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> ) } ··· }
|