@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 组件使用说明的更多相关文章

  1. salesforce lightning零基础学习(十三) 自定义Lookup组件(Single & Multiple)

    上一篇简单的介绍了自定义的Lookup单选的组件,功能为通过引用组件Attribute传递相关的sObject Name,捕捉用户输入的信息,从而实现搜索的功能. 我们做项目的时候,可能要从多个表中获 ...

  2. stenciljs 学习七 路由

    stenciljs路由类似react router 安装 npm install @stencil/router --save 使用 导入包 import "@stencil/router& ...

  3. DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件

    DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件   本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...

  4. day91 DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件

    DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件   本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...

  5. day 89 DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件

    DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件   本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...

  6. DjangoRestFramework学习二之序列化组件、视图组件 serializer modelserializer

      DjangoRestFramework学习二之序列化组件.视图组件   本节目录 一 序列化组件 二 视图组件 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组 ...

  7. day 90 DjangoRestFramework学习二之序列化组件

      DjangoRestFramework学习二之序列化组件   本节目录 一 序列化组件 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组件 首先按照 ...

  8. Spark学习之基础相关组件(1)

    Spark学习之基础相关组件(1) 1. Spark是一个用来实现快速而通用的集群计算的平台. 2. Spark的一个主要特点是能够在内存中进行计算,因而更快. 3. RDD(resilient di ...

  9. 微信小程序把玩(二十三)modal组件

    原文:微信小程序把玩(二十三)modal组件 modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件-- ...

随机推荐

  1. LeetCode--204--计数质数

    问题描述: 统计所有小于非负整数 n 的质数的数量. 示例: 输入: 10 输出: 4 解释: 小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 . 方法1:经典的判断是否为质数遍历( ...

  2. Rspec: everyday-rspec实操: 第8章DRY. (6个方法,其中3个方法好上手)

    Don't Repeat Yourself. • 把操作步骤提取到辅助模块中;✅ • 通过let复用测试中的实例变量;✅ • 把通用的设置移到共享的情景中;⚠️(不喜欢) • 在RSpec和rspec ...

  3. Python基础--列表、元组

    一.什么是列表.元组 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见 ...

  4. 转 解决linux下tomcat的shutdown命令杀不死进程

    tomcat在windows下可以直接关闭,但是貌似在Linux下有时候shutdown.sh 没有关闭tomcat进程; 现象:在Linux下shutdown.sh ,然后查看tomcat进程发现没 ...

  5. python-day16--内置函数

    内置函数操作 #!usr/bin/env python # -*- coding:utf-8 -*- # 1.locals()和globals() # def func(): # x=1 # y=2 ...

  6. iOS UI-Lable标签、NStimer定时器和RunLoop超级死循环

    // 标签UILable -显示文字 // 1.创建标签 UILabel *lable = [[UILabel alloc] init]; // 2.设置标签的坐标和大小 [lable setFram ...

  7. js通过class获取元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta char ...

  8. SQL Server 调优系列进阶篇 - 如何索引调优

    前言 上一篇我们分析了数据库中的统计信息的作用,我们已经了解了数据库如何通过统计信息来掌控数据库中各个表的内容分布.不清楚的童鞋可以点击参考. 作为调优系列的文章,数据库的索引肯定是不能少的了,所以本 ...

  9. ASP.NET下跨应用共享Session和使用Redis进行Session托管

    在之前的博客中,我说到了Session的共享问题,其中说到了Web Farm和Web Garden两种情况下Session的处理.在ASP.NET提供的Session处理方法中,有以下四种模式: 1. ...

  10. 一款经典的 jQuery Lightbox 灯箱效果

    一个灯箱效果的图片展示插件. 版本: jQuery v1.2.3+ jQuery Lightbox v2.7.1 github 实例预览 使用方法 载入 CSS 文件 <link rel=&qu ...