stenciljs 学习十三 @stencil/router 组件使用说明
@stencil/router 组件包含的子组件
- stencil-router
- stencil-route-switch
- stencil-route
- stencil-route-link
- stencil-route-redirect
- stencil-route-title
stencil-router 说明
参数:
root 根路径路由处理的为位置
historyType history 类型 browser 或者hash
titlesuffix 页面title 的后缀,可以通过routetitle 更新
参考格式:
<stencil-router titleSuffix=" - My App">
<stencil-route-switch scrollTopOffset={0}>
<stencil-route url="/" component="landing-page" exact={true} />
<stencil-route url="/demos" component="demos-page" />
<stencil-route url="/other" component="other-page" />
<stencil-route component="page-not-found" />
</stencil-route-switch>
</stencil-router>
stencil-route-switch
参考格式:
<stencil-router>
<stencil-route-switch scrollTopOffset={0}>
<stencil-route url="/" component="landing-page" exact={true}/>
<stencil-route url="/demos" component="demos-page" />
<stencil-route component="catch-all" />
</stencil-route-switch>
</stencil-router>
用户认证路由配置
使用了一个routerender 并定义自定义配置
参考
const PrivateRoute = ({ component, ...props}: { [key: string]: any}) => {
const Component = component;
const redirectUrl = props.failureRedirect | '/login';
return (
<stencil-route {...props} routeRender={
(props: { [key: string]: any}) => {
if (auth.isAuthenticated) {
return <Component {...props} {...props.componentProps}></Component>;
}
return <stencil-router-redirect url="/login"></stencil-router-redirect>
}
}/>
);
}
auth
const auth = {
isAuthenticated: false,
authenticate: function() {
this.isAuthenticated = true;
},
logout: function() {
this.isAuthenticated = false;
}
}
const isAuthenticated = (): boolean => {
return isUserLoggedIn;
}
配置router
<stencil-router titleSuffix="My App - ">
<stencil-route-switch scrollTopOffset={0}>
<stencil-route url="/" component="landing-page" exact={true} />
<PrivateRoute url="/user" component="user-info" />
<PrivateRoute url="/org" component="org-info" />
</stencil-route-switch>
</stencil-router>
stencil-route 配置每条路由
- 基本配置
<stencil-route url="/" component="landing-page" exact={true} />
- 多路径配置
<stencil-route url={["/", "home"]} component="landing-page" exact={true} />
- 路由参数
<stencil-route url="/page/:pageNum(\\d+)" component="page-item" />
<stencil-route url="/user/:name?" component="user-page" />
<stencil-route url="/user*" component="user-page" />
- 组件属性传递
<stencil-route url="/" component="landing-page"
componentProps={{ firstName: 'Ellie' }} />
- 配置routerender函数
<stencil-route url="/" exact={true} routeRender={
(props: { [key: string]: any}) => {
return <span>Hello {props.firstName}</span>;
}
} />
stencil-route-link 配置
- 基本配置
可以配置连接的地址,样式
<stencil-route-link url="/" exact={true}>Home</stencil-route-link>
<stencil-route-link url="/info" urlMatch="/info/*">Information</stencil-route-link>
<stencil-route-link url="/info" activeClass="link-active">
Information
</stencil-route-link>
- 锚属性配置
<stencil-route-link
url="/"
anchorClass="site-link"
anchorRole="link"
anchorTitle="Home link"
anchorTabIndex="2"
>
Home
</stencil-route-link>
stencil-route-redirect 配置重定向
就一个参数url
参考:
<stencil-route-redirect url="/" />
stencil-route-title
更新页面的title,主要参数title
<stencil-route-title title="Home" />
not found 路由配置
可以方便的使用stencil-route-switch 处理
<stencil-router>
<stencil-route-switch scrollTopOffset={0}>
<stencil-route url="/" component="landing-page" exact={true}/>
<stencil-route url="/demos" component="demos-page" />
<stencil-route component="catch-all" />
</stencil-route-switch>
</stencil-router>
编程使用
- 导入方法
import { RouterHistory } from '@stencil/router';
export class askPage {
@Prop() history: RouterHistory;
}
- 基本方法
// pushing a route (going forwards to a certain route)
this.history.push(`/demos`, {});
// popping a route (going back to a certain route)
this.history.pop('/home', {});
// navigate back as if the user hit the back button in the browser
this.history.goBack();
// navigate forwards as if the user hit the forwards button in the browser
this.history.goForward();
// replace the current nav history and reset to a certain route
this.history.replace('/', {});
// navigate through the history stack by `n` entries
this.history.go(n: number);
参考资料
https://github.com/ionic-team/stencil-router/wiki
stenciljs 学习十三 @stencil/router 组件使用说明的更多相关文章
- salesforce lightning零基础学习(十三) 自定义Lookup组件(Single & Multiple)
上一篇简单的介绍了自定义的Lookup单选的组件,功能为通过引用组件Attribute传递相关的sObject Name,捕捉用户输入的信息,从而实现搜索的功能. 我们做项目的时候,可能要从多个表中获 ...
- stenciljs 学习七 路由
stenciljs路由类似react router 安装 npm install @stencil/router --save 使用 导入包 import "@stencil/router& ...
- DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件
DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件 本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...
- day91 DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件
DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件 本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...
- day 89 DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件
DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件 本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...
- DjangoRestFramework学习二之序列化组件、视图组件 serializer modelserializer
DjangoRestFramework学习二之序列化组件.视图组件 本节目录 一 序列化组件 二 视图组件 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组 ...
- day 90 DjangoRestFramework学习二之序列化组件
DjangoRestFramework学习二之序列化组件 本节目录 一 序列化组件 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组件 首先按照 ...
- Spark学习之基础相关组件(1)
Spark学习之基础相关组件(1) 1. Spark是一个用来实现快速而通用的集群计算的平台. 2. Spark的一个主要特点是能够在内存中进行计算,因而更快. 3. RDD(resilient di ...
- 微信小程序把玩(二十三)modal组件
原文:微信小程序把玩(二十三)modal组件 modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件-- ...
随机推荐
- python 在 Windows Server 2008 r2 上 安装失败
Microsoft Visual C++ 2008 Redistributable Package link (x86): https://www.microsoft.com/en-us/downlo ...
- Android控件Gridview实现多个menu模块,可添加可删除
此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...
- Confluence 6 导入 Active Directory 服务器证书 - UNIX
为了让你的应用服务器能够信任你的目录服务器.你目录服务器上导出的证书需要导入到你应用服务器的 Java 运行环境中.JDK 存储了信任的证书,这个存储信任证书的文件称为一个 keystore.默认的 ...
- sql server server 2005任务导入导出功能选项没有的解决方法
出现这个问题主要原因是安装的sql server是Express版本的,或者已经安装了Express版本之后安装了企业版的.但是SQL图形管理工具仍然是SQL Server Manageme ...
- Python的数据类型3元组,集合和字典
首先要讲到的就是元组 元组其实拥有列表的一些特性,可以存储不同类型的值,但在某些方面元组又比不上列表 定义一个元组,你可以不用加‘ [ ] ’,你只需用逗号隔开即可 例如 1 2 3 4 5 6 7 ...
- learning uboot distro design in am335x-evm board
reference: uboot_dir/doc/README.distro Linux distributions are faced with supporting a variety of bo ...
- js中的deom ready执行的问题
一开始我想到这,DOMContentLoaded,不兼容, <!DOCTYPE html> <html> <head> <meta charset=" ...
- 为何 Delphi的 Local Variables 突然没有值显示了
可能是上次编译后 code未再修改过. 试试 随便 输入一个空格,然后F9
- python随机数,随机选择……random
import random from random import random, uniform, randint, randrange, choice, sample, shuffle list = ...
- 等比例缩放图片(C#)
private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth) { try { System.Drawing.Image ...