miniapp-router

简介

miniapp-router 是我们在 pc-应用上层拓展的单页面路由管理器，帮助开发者构建单页面应用。
路由匹配规则，可见path-to-regexp，通配符需要写为 (.) ，如 /com-a/(.)

安装

npm i miniapp-router -S

使用

可查看./demo示例

//page.js
import demodata from "./data";
import routerConfig from "./router"; //路由定义
import routerInit from "miniapp-router"; //引入初始化方法

Page({
  data: {
    demodata,
    typeName: "Component 组件",
    componentName: "Button 按钮",
    type: "component",
    component: "button",
    selectedKeys: ["button, input"],
  },
  onLoad() {
    routerInit.call(this, routerConfig); //注意需要传入this，会绑定$router至页面this上，子组件可通过this.$page获取页面this
  },
  onItemClick(event) {
    let { typeName, componentName, type, component } = event.target.dataset;
    this.setData({ typeName, componentName, type, component });
    this.$router.push(`/${type}/${component}`);
  },
});

路由定义

export default {
  routes: [
    {
      path: "/component",
      component: "component",
      children: [
        { path: "/button", component: "button" },
        { path: "/icon", component: "icon" },
        { path: "/menu-button", component: "menu-button" },
        { path: "/select", component: "select" },
        { path: "/slider", component: "slider" },
        { path: "/menu", component: "menu" },
        { path: "/progress", component: "progress" },
        { path: "/input", component: "input" },
        { path: "/textarea", component: "textarea" },
        { path: "/switch", component: "switch" },
        { path: "/radio", component: "radio" },
        { path: "/checkbox", component: "checkbox" },
        { path: "/date-picker", component: "date-picker" },
        { path: "/pagination", component: "pagination" },
        { path: "/table", component: "table" },
      ],
    },
    {
      path: "/scene",
      component: "scene",
      children: [{ path: "/form", component: "form" }],
    },
    {
      path: "/api",
      component: "api",
      children: [
        { path: "/other", component: "other" },
        { path: "/media", component: "media" },
        { path: "/interface", component: "interface" },
        { path: "/network", component: "network" },
        { path: "/base", component: "base" },
      ],
    },
  ],
  option: {
    initPath: "/component/button",
  },
};

页面

• 注意 slot 需和路由定义中的 component 对应

//page.axml
<view class="body-content">
  <router-view>
    <base slot="component" />
    <scene slot="scene" />
    <api slot="api" />
  </router-view>
</view>

//components/base.axml
<view>
  <view class="content-main-container" />
    <router-view>
      <button slot="button" />
      <slider slot="slider" />
      <icon slot="icon" />
      <text slot="text" />
      <progress slot="progress" />
      <menu slot="menu" />
      <select slot="select" />
      <textarea slot="textarea" />
      <input slot="input" />
      <checkbox slot="checkbox" />
      <switch slot="switch" />
      <radio slot="radio" />
      <pagination slot="pagination" />
      <date-picker slot="date-picker" />
      <menu-button slot="menu-button" />
      <table slot="table" />
    </router-view>
  </view>
</view>

router-view 组件

路由包裹组件

注意事项

基于框架上层封装，基于应用框架现有功能，要求组件树层级中，在渲染时，组件树中只允许存在嵌套关系的 router-view，不允许两个 router-view 在同一层级中出现，如：

//错误使用方式
<view>
  <router-view />
  <router-view />
</view>

//component-a
<view>
  <router-view />
</view>

//component-b
<view>
  <router-view />
</view>

<view>
  <component-a /> //会导致错误，因两个router-view组件不是嵌套关系
  <component-b />
</view>

定义

{
  "component": true,
  "usingComponents": {
    "router-view": "miniapp-router/router-view/router-view"
  }
}

案例

<view>
  <view class="content-main-container">
    <router-view>
      <button slot="button" />
      <slider slot="slider" />
      <icon slot="icon" />
      <text slot="text" />
      <progress slot="progress" />
      <menu slot="menu" />
      <select slot="select" />
      <textarea slot="textarea" />
      <input slot="input" />
      <checkbox slot="checkbox" />
      <switch slot="switch" />
      <radio slot="radio" />
      <pagination slot="pagination" />
      <date-picker slot="date-picker" />
      <menu-button slot="menu-button" />
      <table slot="table" />
    </router-view>
  </view>
</view>

方法

routerInit

初始化后会在 page 的 this 上注入$router 变量

参数

• config：IRouterConfig

export interface IRouterConfig {
  routes?: IRoute[];
  option?: {
    namespace?: string; //注入到this上的变量名，默认$router
    initPath?: string; //最开始的path
  };
}
export interface IRoute {
  path: string;
  component: string; //组件名
  children?: IRoute[];
}

案例

Page({
  onLoad() {
    routerInit.call(this, routerConfig); //需注入this
  },
});

$router.replace, $router.push

动态的导航到一个新 URL。
注：此 url 非真实 url，仅供单页面方案使用
_

参数

• path: string

示例

Page({
  onLoad() {
    routerInit.call(this, routerConfig);
  },
  onItemClick(event) {
    let { type, component } = event.target.dataset;
    console.log(`/${type}/${component}`);
    this.$router.push(`/${type}/${component}`);
  },
  onReplace(event) {
    let { type, component } = event.target.dataset;
    console.log(`/${type}/${component}`);
    this.$router.replace(`/${type}/${component}`);
  },
});

$router.go

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)

// 在浏览器记录中前进一步
router.go(1);

// 后退一步记录
router.go(-1);

// 前进 3 步记录
router.go(3);

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100);
router.go(100);

$router.setBeforeChange

设置钩子函数，此函数会在导航变更前调用，若返回的值不为 true，则导航不会变化。

参数

• _this: IComponent | null
• methodName: string

注：

• _this 为页面 this 或自定义组件 this，当_this 为 null 时，删除之前设置的钩子函数
• 页面中只能设置一次，重复设置会覆盖之前的钩子函数

_

示例

Page({
  onLoad() {
    routerInit.call(this, routerConfig);
    this.$router.setBeforeChange(this, "onBeforeChange");
  },
  onBeforeChange(from, to) {
    //钩子函数可以获取两个参数，from为当前路由，to为即将要跳转的路由
    console.log(from, to);
    return true;
  },
  onUnload() {
    this.$router.setBeforeChange(null);
  },
});

$router.setAfterChange

设置钩子函数，此函数会在导航变更后调用。

参数

• _this: IComponent | null
• methodName: string

注：

• _this 为页面 this 或自定义组件 this，当_this 为 null 时，删除之前设置的钩子函数
• 页面中只能设置一次，重复设置会覆盖之前的钩子函数

_

示例

Page({
  onLoad() {
		routerInit.call(this, routerConfig);
    this.$router.setAfterChange(this, 'onAfterChange');
	},
  onAfterChange(){
		//逻辑
  }
  onUnload(){
  	this.$router.setAfterChange(null)
  }
});

$router.addParamsListener

设置钩子函数，此函数会在 params 变化时被调用。

参数

• _this: IComponent
• methodName: string

注：

• _this 为页面 this 或自定义组件 this
• 页面中可设置多次（如多个自定义组件中），但同一 this 作用域中，重复设置会覆盖此作用域之前设置的钩子函数

示例

Page({
  onLoad() {
    routerInit.call(this, routerConfig);
    this.$router.addParamsListener(this, "onParamsChange");
  },
  onParamsChange(preParams, nextParams) {
    //钩子函数可以获取两个参数，preParams为之前的params，
    //nextParams为变化后的params
    console.log(preParams, nextParams);
  },
});

$router.removeParamsListener

删除某个 this 作用域中设置的钩子函数

参数

• _this: IComponent

注：

• _this 为页面 this 或自定义组件 this

示例

Component({
  mixins: [],
  data: { params: {} },
  props: {
    query: {},
  },
  didMount() {
    let $router = this.$page.$router;
    $router.addParamsListener(this, "onParamsChange");
  },
  didUpdate() {},
  didUnmount() {
    this.$page.$router.removeParamsListener(this);
  },
  methods: {
    onParamsChange(preParams, nextParams) {
      this.setData({ params: nextParams });
    },
  },
});