stenciljs 学习十二 官方doc 路由使用的例子
路由在单页面应用开发中是一个相对比较重要的位置
以下为官方网站的路由配置
<stencil-router scrollTopOffset={0}>
<stencil-route-switch>
<stencil-route url="/" component="landing-page" exact={true} />
<stencil-route
url="/docs/:pageName"
routeRender={(props: { [key: string]: any }) => {
const map = {
'introduction': 'introduction/why-stencil',
'goals-and-objectives': 'introduction/goals-and-objectives',
'browser-support': 'introduction/browser-support',
'getting-started': 'introduction/getting-started',
'my-first-component': 'introduction/my-first-component',
'component-lifecycle': 'components/component-lifecycle',
'decorators': 'components/decorators',
'events': 'components/events',
'reactive-data': 'components/reactive-data',
'templating-jsx': 'components/templating-and-jsx',
'styling': 'components/styling',
'forms': 'components/forms',
'framework-integration': 'framework-integration/overview',
'angular': 'framework-integration/angular',
'react': 'framework-integration/react',
'vue': 'framework-integration/vue',
'ember': 'framework-integration/ember',
'javascript': 'framework-integration/javascript',
'config': 'tooling/config',
'dev-server': 'tooling/dev-server',
'prerendering': 'tooling/prerendering',
'typed-components': 'tooling/typed-components',
'docs-auto-generation': 'tooling/docs-auto-generation',
'build-conditionals': 'tooling/build-conditionals',
'plugins': 'tooling/plugins',
'service-workers': 'guides/service-workers',
'distribution': 'guides/distribution',
'module-bundling': 'guides/module-bundling',
'router': 'guides/router',
'state-tunnel': 'guides/state-tunnel',
'redux': 'guides/redux',
'style-guide': 'guides/style-guide',
'testing': 'testing/overview',
'unit-testing': 'testing/unit-testing',
'e2e-testing': 'testing/e2e-testing',
'screenshot-visual-diff': 'testing/screenshot-visual-diff',
};
return (
<document-component
pages={[map[props.match.params.pageName]]}
/>
);
}}
/>
<stencil-route url="/demos" component="demos-page" />
<stencil-route url="/pwa" component="pwas-page" />
<stencil-route url="/resources" component="resources-page" />
<stencil-route component='notfound-page'></stencil-route>
</stencil-route-switch>
</stencil-router>
说明
这个路由的配置,将基本功能都用上了,比如routeRender 比较好的api 使用说明
参考资料
https://github.com/ionic-team/stencil-site
stenciljs 学习十二 官方doc 路由使用的例子的更多相关文章
- (转)SpringMVC学习(十二)——SpringMVC中的拦截器
http://blog.csdn.net/yerenyuan_pku/article/details/72567761 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter, ...
- react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)
第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...
- Scala学习十二——高阶函数
一.本章要点 在Scala中函数是”头等公民“(可以作为参数,返回值,赋值给其他); 可以创建匿名函数,通常还会交给其他函数; 函数参数可以给出需要稍后执行的行为; 许多集合方法都接受函数参数,将函数 ...
- JVM学习十二:JVM之性能监控工具
前面我们学习了很多JVM相关的理论知识,那么本节将重点讲述的是工具的使用,正所谓:工欲善其事,必先利其器.因此,本节介绍常用的性能监控工具,用于性能监控和问题排查. 一.系统性能监控 系统性能工具用于 ...
- MVC学习十四:MVC 路由 Route
一.MVC路由(Route)是什么? MVC路由(Route)可以理解规定用户访问网站方式的配置文件,就例如:我们在访问普通页面时http://xxxx/web/xx.aspx,但在MVC中我们的访问 ...
- Java编程思想学习(十二) 数组和容器
一.数组 1).数组的多种初始化方式 下面总结了初始化数组的多种方式,以及如何对指向数组的引用赋值,使其指向另一个数组对象.值得注意的是:对象数组和普通数组的各种操作基本上都是一样的:要说有什么不同的 ...
- java web 学习十二(session)
一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...
- Flask 学习 十二 用户评论
评论在数据库中的表示 由于评论和2个模型有关系,分别是谁发了评论,以及评论了哪个文章,所以这次要更新数据库模型 models.py 创建用户评论数据库模型 class Comment(db.Model ...
- 强化学习(十二) Dueling DQN
在强化学习(十一) Prioritized Replay DQN中,我们讨论了对DQN的经验回放池按权重采样来优化DQN算法的方法,本文讨论另一种优化方法,Dueling DQN.本章内容主要参考了I ...
随机推荐
- [NOI2018]你的名字(68pts)
SAM真让人头秃. 题面 https://www.luogu.org/problemnew/show/P4770 首先考虑 l=1,r=∣S∣的做法 如果对于ION2018的子串不用判重的话,对ION ...
- hdu2087kmp
一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input输入中含有一些数据,分别是成对出现的花布条和 ...
- WaitForMultipleObjects用法详解
本文转载于:http://blog.csdn.net/sac761/article/details/52456385 WaitForMultipleObjects是Windows中的一个功能非常强大的 ...
- javassist示例
javassist的作用是动态生成字节码. package com.zhang; class Fighter {} public class Assist_Test { public static v ...
- 无名管道跟dup,dup的使用
参考资料: http://www.tldp.org/LDP/lpg/node11.html http://blog.csdn.net/yeyuangen/article/details/6852682 ...
- spring boot 学习(八)定时任务 @Scheduled
SpringBoot 定时任务 @Scheduled 前言 有时候,我们有这样的需求,需要在每天的某个固定时间或者每隔一段时间让应用去执行某一个任务.一般情况下,可以使用多线程来实现这个功能:在 Sp ...
- Java——File类概述
body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...
- 使用pool的多进程,不执行的问题
from multiprocessing import Pool def fetch_data(idlist,test): pass p=Pool(4) result=[] for i in rang ...
- EXCEL FAQ
1.win7双击打开EXCEL07时显示停止工作,但是在打开方式中可以打开,怎么破? 加载项的问题,在选项-信任中心-信任中心设置-加载项-禁用所有应用程序加载项即可,但是这样会丧失一些功能,也可以把 ...
- DevExpress v17.2新版亮点—WinForms篇(五)
用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.开篇介绍了DevExpress WinForms v17.2 Data Grid Control ...