tina-router-for-tt v0.0.5

tina-router

An elegant enhanced router for Tina.js based ByteDance-Mini-Program

基于微信版 tina-router 修改

快速上手

我们假设你已经在使用 Tina 和 mina-webpack 开发小程序项目。

安装

npm i --save tina-router-for-tt

/**
 * <script> in /app.mina
 */
import Tina from '@tinajs/tina'
import router from 'tina-router-for-tt'

Tina.use(router)

App(......)

使用

/**
 * <script> in /pages/demo.mina
 */
import { Page } from "@tinajs/tina";
import { api } from "../api";

Page.define({
  onLoad() {
    api
      .fetchUser({ id: this.$route.query.id })
      .then(data => this.setData(data));
  },
  methods: {
    toLogin() {
      this.$router.navigate(`/pages/login?from=${this.$route.fullPath}`);
    }
  }
});

常见问题

无法正确地自动获取底部 tab 列表

若 tina-router 无法正确地自动获取底部 tab 列表，请尝试将微信开发者工具的 "ES6 转 ES5" 功能关闭：

若仍不生效，可以在注册插件时手动设置：

/**
 * <script> in /app.mina
 */
import Tina from '@tinajs/tina'
import router from '@tinajs/tina-router'

Tina.use(router, {
  tabs: [
    'page/home',
    'page/mine',
  ],
})

App(......)

API

Plugin.install

• 参数:
  • {Object} Tina Tina
  • {Object} config 同 createRouterMixin 中的参数 config

• 说明:

  以插件的形式安装入 Tina。

createRouterMixin

• 参数:

  • {Object} config

    • {Array <String>} tabs MINA tabbar 中的所有页面路径。

      插件默认将自动从全局配置中读取该信息。

• 说明:

  创建混合对象。

对页面 / 组件的注入

\$route

• 说明:

  路由信息对象。 仅页面可用，混入组件不生效。

path

• 类型: String

• 说明:

  当前页面的路径。

  // /pages/demo?foo=bar
  Page.define({
    onLoad() {
      console.log(this.$route.path);
      // '/page/demo'
    }
  });

query

• 类型: Object

• 说明:

  当前页面的参数对象。 与小程序中 onLoad(Object query) 传入的 query 不同，这里的 $route.query 会对各个值进行 decodeURIComponent 解码。

  // /pages/demo?foo=bar
  Page.define({
    onLoad() {
      console.log(this.$route.query);
      // { foo: 'bar }
    }
  });

fullPath

• 类型: String

• 说明:

  当前页面的完整路径。

  // /pages/demo?foo=bar
  Page.define({
    onLoad() {
      console.log(this.$route.fullPath);
      // /pages/demo?full=bar
    }
  });

\$router

• 说明:

  Router 实例。

Router 实例

navigate(location, query)

• 参数:
  • {String} location 前往的路径
  • {Object} query query 对象
• 返回值: Promise

• 说明:

  前往具体的路径。

  当目标路径属于导航栏标签 (tabs) 时，实际触发 reLaunch (需正确地设置导航栏页面列表) 。

  Page.define({
    onLoad() {
      this.$router.navigate("/page/home", { message: "hi" });
    }
  });

redirect(location, query)

• 参数:
  • {String} location 重定向的路径
  • {Object} query query 对象
• 返回值: Promise

• 说明:

  重定向具体的路径。

  当目标路径属于导航栏标签 (tabs) 时，实际触发 reLaunch (需正确地设置导航栏页面列表) 。

  Page.define({
    onLoad() {
      this.$router.redirect("/page/login");
    }
  });

switchTab(location)

• 参数:
  • {String} location 重定向的路径
• 返回值: Promise

• 说明:

  切换到具体的一级页面 (属于导航栏标签的页面)。该方法运行效率更高，但不支持 query 参数。

  Page.define({
    onLoad() {
      this.$router.switchTab("/page/login");
    }
  });

back()

• 参数:
  • 无
• 返回值: Promise

• 说明:

  后退。

  Page.define({
    onLoad() {
      this.$router.back();
    }
  });

isTab(location)

• 参数:
  • {String} location 路径
• 返回值: Boolean

• 说明:

  返回某路径是否属于导航栏项。 需正确地设置导航栏页面列表

  Page.define({
    onLoad() {
      if (this.$router.isTab("/page/home")) {
        console.log("homepage is one of the tabs");
      }
    }
  });

License

Apache-2.0 @ yelo