0.1.9 • Published 4 years ago
miniapp-router v0.1.9
简介
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 });
},
},
});