Skip to main content

路由功能

路由配置​

Taro 遵循微信小程序的路由规范。只需要修改全局配置的 pages 属性，配置为 Taro 应用中每个页面的路径即可。

Taro 没有实现浏览器的 history API，因此不能使用 react-router、vue-router 等路由库。

路由跳转​

可以通过 Taro 提供的 API 来跳转到目的页面。

// 跳转到目的页面，打开新页面
Taro.navigateTo({
  url: "/pages/page/path/name",
});

// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
  url: "/pages/page/path/name",
});

路由传参​

可以通过在所有跳转的 url 后面添加查询字符串参数进行跳转传参，例如：

// 传入参数 id=2&type=test
Taro.navigateTo({
  url: "/pages/page/path/name?id=2&type=test",
});

获取路由参数​

跳转成功后，在目标页面的生命周期方法中，可以通过 Taro.getCurrentInstance().router.params 获取路由参数。

React

import React, { Component } from "react";
import { View } from "@tarojs/components";

class Index extends Component {
  // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
  // 而不是频繁地调用此 API
  $instance = getCurrentInstance();

  componentDidMount() {
    // 获取路由参数
    console.log(this.$instance.router.params); // 输出 { id: 2, type: 'test' }
  }

  render() {
    return <View className="index" />;
  }
}

export default Index;

H5​

H5 路由还支持设置路由模式、设置 basename、路由守卫等能力

参考​