router

小程序自定义组件

使用此组件需要依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

功能描述

1. 提供 query 拼装功能

<router url="test/:docid?id=1" query="{{queryData}}">test</router>

queryData中的键值对会拼接到跳转的url中

2. 提供跳转前/跳转后回调函数

3. 提供 params 动态拼接路由

<router url="test/:docid?id=1" params="{{paramsData}}">test</router>

paramsData: { docid: '1' }

实际跳转的url将会是test/1?id=1

使用方法

1. 安装 router

npm install --save miniprogram-router

2. 在需要使用 router 的页面 page.json 中添加 router 自定义组件配置

{
  "usingComponents": {
    "router": "miniprogram-router"
  }
}

3. WXML 文件中引用 router

<router bind:beforeroute="beforeRoute" open-type="navigate" url="test/:docid?id=1" query="{{queryData}}" params="{{paramsData}}">test</router>

Page({
  data: {
    queryData: {
      a: 5
    },
    paramsData: {
      docid: '1'
    }
  },
  beforeRoute() {
    console.log("trigger beforeRoute")
  }
})

router的属性介绍如下：

属性名	类型	默认值	是否必须	说明
url	String	显示屏幕的宽度	是	当前小程序内的跳转链接
open-type	String	navigate	否	跳转方式
delta	Number	1	否	当 open-type 为 'navigateBack' 时有效，表示回退的层数
query	Object		否	追加到跳转链接上的query string
params	Object		否	动态路径参数
beforeroute	Function		否	跳转前触发函数
afterroute	Function		否	跳转后触发函数