tinajs / tina-router

:metro: An elegant enhanced router for Tina.js based Wechat-Mini-Program

tina-router

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

快速上手

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

安装

npm i --save @tinajs/tina-router

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

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

tina-router's Issues

`$route.fullPath` is inconsistent with the actual full path

$router 跳转时没有encodeURIComponent

// this.$route.fullPath = '/pages/test?id=1'
this.$router.navigate(`/pages/login?toPage=${this.$route.fullPath}`)

跳转时没有默认处理encodeURIComponent到时跳转后获得toPage=/pages/test 后没的参数不见了 需要手动加上encodeURIComponent

this.$router.navigate(`/pages/login?toPage=${encodeURIComponent(this.$route.fullPath)}`)

感觉可以直接在$router里面直接自动处理，这样就不用每次跳转都去手动encodeURIComponent

看源码 $router 是 promise 过的，可是还是报错

this.$router.navigate().then()

报
Cannot read property 'then' of undefined;

返回时 是this.$router.location没有更新

a页面 this.$router.location=a；
->
a页面跳转b页面 this.$router.location=b；
->b后退上一页a页面 this.$router.location=b；

The values of `$route.query` should be decoded with decodeURIComponent