stenciljs路由类似react router
安装
npm install @stencil/router --save 包含的组件
- stencil-router
项目中应该只有一个模板路由器组件。此组件控制与浏览器历史记录的所有交互，
并通过事件系统聚合更新 - stencil-route
此组件基于提供的URL是否与当前位置匹配来呈现。
包含的属性
url (Array||string) ?同时可以传递参数 /foo/:barcomponent (string) 组件名称componentProps （组件的属性）包含传递给组件渲染的数据routeRender （function） 接受属性作为参数的函数。如果存在，则将使用它来代替定义的组件exact （boolean） 如果为true，则只有当url与该地址完全匹配时才呈现此路由，如果为false，则在当前url‘匹配‘定义的url时呈现- stencil-route-link
此组件用于渲染指向已定义路由的链接。可以与当前地址是否匹配应用特定样式。
包含的属性
url (string) 连接的路径exact (boolean) ?如果为true，则只有当url与该地址完全匹配时才应用activeclassactiveClass （string） 匹配时候应用的css效果- stencil-route-redirect
url 地址重定向
配置路由
<stencil-router> ?<stencil-route url="/" component="landing-page" exact={true}/> ?<stencil-route url="/demos" component="demos-page"/> ?<stencil-route url="/demos/rendering" component="fiber-demo"/> ?<stencil-route url="/docs" component="docs"/> ?<stencil-route url="/docs/getting-started" component="getting-started"/> ?<stencil-route url="/components" component="basics-components"/></stencil-router>导航
- 静态导航
使用 ?stencil-route-link
<stencil-route-link url="/"><stencil-route-link url="/demos"><stencil-route-link url="/docs/getting-started">- 编程方式
import 操作方法
import { RouterHistory } from ‘@stencil/router‘;export class askPage { ?@Prop() history: RouterHistory;}包含的方法
// pushing a route (going forwards to a certain route)this.history.push(`/demos`, {});// navigate back as if the user hit the back button in the browserthis.history.goBack();// navigate forwards as if the user hit the forwards button in the browserthis.history.goForward();// replace the current nav history and reset to a certain routethis.history.replace(‘/‘, {});// navigate through the history stack by `n` entriesthis.history.go(n: number);url 参数
- 传递的方式
<stencil-route url=‘/show/:pageNum‘ component=‘show-page‘ /><stencil-route-link url={`/show/${someData}`} />- 组件获取参数
import { MatchResults } from ‘@stencil/router‘;...export class ShowPage { ?@Prop() match: MatchResults;}const myData = this.match.params.pageNum;说明
最简单的方式，可以直接使用脚手工具，创建app，包含router demo
参考资料
https://stenciljs.com/docs/router/
stenciljs 学习七 路由
原文地址：https://www.cnblogs.com/rongfengliang/p/9711220.html